成果物
ワイ 「ログイン後Firebaseから寿命が1時間のJWTトークンが取得できる」
ワイ 「現実的な使い方をするなら」
ワイ 「JWTトークンを自分が使ってるオリジンサーバに送って改ざんされていないかチェックする」
ワイ 「ライブラリはfirebase-adminを使う」
トークンが改ざんされていないかチェックするソース
package.json
{"dependencies":{"firebase-admin":"^9.1.0"}}index.js
constadmin=require('firebase-admin');// 各自用意constfirebaseConfig={type:'',project_id:'',private_key_id:'',private_key:'',client_email:'',client_id:'',auth_uri:'',token_uri:'',auth_provider_x509_cert_url:'',client_x509_cert_url:'',};admin.initializeApp({credential:admin.credential.cert(firebaseConfig),});constmain=asyncjwtToken=>{try{constuser=awaitadmin.auth().verifyIdToken(jwtToken);console.log('uid: '+user.uid);}catch(error){console.log(error);}};main('トークン');フロントエンド ソースコード
package.json
{"scripts":{"start":"parcel src/index.html --out-dir public"},"dependencies":{"babel-polyfill":"^6.26.0","firebase":"^7.18.0","parcel-bundler":"^1.12.4","react":"^16.13.1","react-dom":"^16.13.1"}}src/index.html
<!DOCTYPE html><htmllang="ja"><head><metacharset="UTF-8"/><metaname="viewport"content="width=device-width, initial-scale=1.0"/><title>匿名ログイン</title><linkrel="stylesheet"href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"crossorigin="anonymous"/><linkrel="stylesheet"href="style.css"/></head><body><divid="app"></div><script
src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"crossorigin="anonymous"></script><script src="index.js"></script></body></html>src/index.js
importReactfrom'react';importReactDOMfrom'react-dom';import'babel-polyfill';import'firebase/auth';constfirebase=require('firebase/app');// 各自用意constfirebaseConfig={apiKey:''};firebase.initializeApp(firebaseConfig);constApplication=()=>{const[jwtToken,setJwtToken]=React.useState('null');const[uid,setUid]=React.useState('null');const[display,setDisplay]=React.useState(false);React.useEffect(()=>{firebase.auth().onAuthStateChanged(asyncdata=>{if(data!==null){setUid(data.uid);setJwtToken(awaitfirebase.auth().currentUser.getIdToken(true));}setDisplay(true);});},[]);if(!display){return(<><div><divclassName="position-absolute h-100 w-100 m-0 d-flex align-items-center justify-content-center"><divclassName="spinner-border text-primary"role="status"><spanclassName="sr-only">Loading...</span>
</div>
</div>
</div>
</>
);}return(<>{uid==='null'?(<buttontype="button"className="btn btn-primary"onClick={()=>{setDisplay(false);firebase.auth().signInAnonymously().then(async()=>'').catch(()=>{alert('ログイン失敗');});}}>ログイン</button>
):(<buttontype="button"className="btn btn-danger"onClick={()=>{firebase.auth().signOut().then(()=>{setDisplay(true);setUid('null');setJwtToken('null');alert('ログアウトしました');}).catch(()=>{alert('ログアウト失敗');});}}>ログアウト</button>
)}<br/><br/><tableclassName="table table-bordered"style={{width:'100%'}}><theadclassName="table-primary"><tr><th>uid</th>
<th>JwtToken</th>
</tr>
</thead>
<tbody><tr><td>{uid}</td>
<td>{jwtToken}</td>
</tr>
</tbody>
</table>
</>
);};ReactDOM.render(<Application/>,document.getElementById('app'));src/style.css
table{width:100%;border-collapse:collapse;table-layout:fixed;}tabletd{overflow:hidden;word-break:break-all;}コマンド
$ npm start
ワイのGitHubとか
GitHub: https://github.com/yuzuru2
YouTube: https://www.youtube.com/channel/UCuRrjmWcjASMgl5TqHS02AQ
Qiita: https://qiita.com/yuzuru2
LINE: https://line.me/ti/p/-GXpQkyXAm
Twitter: https://twitter.com/yuzuru_program
成果物まとめ: https://qiita.com/yuzuru2/items/b5a34ad07d38ab1e7378
最近の投稿
【第1回】「みんなのポートフォリオまとめサイト」を作ります~プロトタイプ作成編~
【第2回】「みんなのポートフォリオまとめサイト」を作ります~REST API編~
【第3回】「みんなのポートフォリオまとめサイト」を作ります~SNSログイン編~
【第4回】「みんなのポートフォリオまとめサイト」を作ります~フロントエンド編~
いいねが多い記事
Google Apps Scriptの神ライブラリ「cheeriogs」でヤフートップをスクレイピングする。GASのスクレイピングはもうこのライブラリ一択やな。