ワイ 「この記事のカバーです」
https://qiita.com/kiwatchi1991/items/58b53c5b4ddf8d6a7053
バックナンバー
【第1回】「みんなのポートフォリオまとめサイト」を作ります~プロトタイプ作成編~
【第2回】「みんなのポートフォリオまとめサイト」を作ります~REST API編~
成果物
リポジトリ
フロントエンド
https://github.com/yuzuru2/minna_frontend
バックエンド
https://github.com/yuzuru2/minna_backend
構成
フロントエンド: Netlify(月間100GBまで転送量無料)
バックエンド: Netlify Functions(月間125000回まで無料 いわゆるFaaS)
データベース: MongoDB Atlas(ストレージ512MBまで無料 いわゆるDaaS)
SNSログイン: Firebase Authentication(基本使い放題(例外あり))
ワイ 「今回はSNSログインはTwitterのみです」
ログイン流れ
フロントエンド ログインのモジュール
src/logic/util/loginButton.ts
import*asReactfrom'react';import*asfirebasefrom'firebase/app';import{store}from'src';importactionfrom'src/action/basic';importConstantfrom'src/constant';import{getHeaders}from'src/util';importgetJwtTokenfrom'src/firebase';// ツイッターログインexportdefault()=>{constprovider=newfirebase.auth.TwitterAuthProvider();firebase.auth().signInWithPopup(provider).then(asyncresult=>{store.dispatch(action.loadingFlag(true));store.dispatch(action.uid(awaitresult.user.uid));const_res=awaitfetch(`${Constant.api_url[process.env.NODE_ENV]}${Constant.url['/create/user']}/`,{method:'post',headers:getHeaders(awaitgetJwtToken()),body:JSON.stringify({}),});if(_res.status!==200){alert('ログイン失敗');return;}location.reload();});};バックエンド JwtTokenが改ざんされていないかチェックするモジュール
src/util/index.ts
import*asadminfrom'firebase-admin';import*asExpressfrom'express';import*asDotEnvfrom'dotenv';DotEnv.config();if(!admin.apps.length){admin.initializeApp({credential:admin.credential.cert(JSON.parse(process.env.FIREBASE_SDK)asany),});}exportconstgetUid=async(jwtToken:string)=>{const_decode=((awaitadmin.auth().verifyIdToken(jwtToken).catch(()=>{}))asunknown)as{uid:string};if(_decode===undefined){thrownewError('不正なトークン');}return_decode.uid;};exportconstgetParameter=async(req:Express.Request)=>{const_buf=Buffer.from(req.body,'utf-8');returnJSON.parse(_buf.toString('utf-8',0,_buf.length));};