Merge pull request #42 from openhacku-saboten/u-tan/login

firebaseの認証( `login` )

Author: morioprog

package.json

@@ -13,6 +13,7 @@
     "@material-ui/lab": "^4.0.0-alpha.57",
     "@monaco-editor/react": "^4.1.0",
     "axios": "^0.21.1",
+    "firebase": "^8.3.1",
     "marked": "^2.0.1",
     "next": "10.0.8",
     "react": "17.0.1",

pages/login.tsx

@@ -4,6 +4,18 @@ import { NextPage } from 'next';
 import React from 'react';
 import TwitterIcon from '@material-ui/icons/Twitter';
 
+import firebase from 'firebase/app';
+import 'firebase/auth';
+
+import { firebaseConfig } from '../utils/firebaseConfig';
+
+/**
+ * ---API実装時に見るメモ---
+ * idTokenをheadsに入れてサーバーに送信
+ * userNameはtwitterのユーザー名(bodyに入れてサーバーに送信)
+ * ⇒ 以上の2つの情報をサーバーに送信する
+ */
+
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
     displayBox: {
@@ -49,6 +61,76 @@ const useStyles = makeStyles((theme: Theme) =>
 const Login: NextPage = () => {
   const styles = useStyles();
 
+  function submit(): void {
+    // 初期化は一度だけ(!!重要!!)
+    if (!firebase.apps.length) {
+      firebase.initializeApp(firebaseConfig);
+    }
+
+    // 認証処理
+    // signInWithPopupメソッドを叩くと、認証用のポップアップ画面が表示される。
+    // それにTwitterのIDとパスワードを入力すると、コールバックをfirebase側が処理し、
+    // 認証成功時はPromise型で認証情報を返す
+    const provider = new firebase.auth.TwitterAuthProvider();
+    firebase
+      .auth()
+      .signInWithPopup(provider)
+      .then((result) => {
+        /** @type {firebase.auth.OAuthCredential} */
+        const credential = result.credential as firebase.auth.OAuthCredential;
+
+        // This gives you a the Twitter OAuth 1.0 Access Token and Secret.
+        // You can use these server side with your app's credentials to access the Twitter API.
+        const token = credential.accessToken;
+        console.log('token:' + token);
+        const secret = credential.secret;
+        console.log('secret:' + secret);
+
+        // The signed-in user info.
+        const user = result.user;
+        console.log(user);
+        // userNameはtwitterのユーザー名(bodyに入れてサーバーに送信)
+        const userName = user.displayName;
+        console.log(userName);
+        // ローカルストレージにuserNameを保存
+        localStorage.setItem('userName', userName);
+
+        // userIconImageはtwitterのアイコン画像(サーバーに送信しない)
+        const userIconImage = user.photoURL;
+        console.log(userIconImage);
+        // ローカルストレージにuserIconImageの画像パスを保存
+        localStorage.setItem('userIconImage', userIconImage);
+
+        firebase
+          .auth()
+          .currentUser.getIdToken(/* forceRefresh */ true)
+          .then(function (idToken) {
+            // idTokenをheadsに入れてサーバーに送信
+            // idTokenはローカルストレージに保存する
+            console.log(idToken);
+            //ローカルストレージにTokenを保存
+            localStorage.setItem('Token', idToken);
+          })
+          .catch(function (error) {
+            window.alert('error can not get current user:' + error);
+          });
+        // ...
+      })
+      .catch((error) => {
+        // Handle Errors here.
+        const errorCode = error.code;
+        console.log(errorCode);
+        const errorMessage = error.message;
+        console.log(errorMessage);
+        // The email of the user's account used.
+        const email = error.email;
+        console.log(email);
+        // The firebase.auth.AuthCredential type that was used.
+        const credential = error.credential;
+        console.log(credential);
+        // ...
+      });
+  }
   return (
     <Box className={styles.displayBox} borderRadius={16}>
       <Box>
@@ -60,7 +142,7 @@ const Login: NextPage = () => {
         </Typography>
       </Box>
       <Box className={styles.buttonWrapper}>
-        <Button className={styles.loginButton}>
+        <Button className={styles.loginButton} onClick={submit}>
           <TwitterIcon />
           Login with Twitter
         </Button>

utils/firebaseConfig.ts

@@ -0,0 +1,9 @@
+export const firebaseConfig = {
+  apiKey: 'AIzaSyANZ7TpygQkvJuRu7PyIuT8jIdELSdijPg',
+  authDomain: 'omniscode-31b23.firebaseapp.com',
+  projectId: 'omniscode-31b23',
+  storageBucket: 'omniscode-31b23.appspot.com',
+  messagingSenderId: '1031677260576',
+  appId: '1:1031677260576:web:7f63ca23496d71deeb1d45',
+  measurementId: 'G-EX6EXHMLGV',
+};