More than 1 year has passed since last update.

【絶対にできる！】Googleログインボタンの実装【3/6】

Last updated at 2022-03-08Posted at 2022-03-07

【絶対にできる！】Googleログインボタンの実装【3/6】

本記事は、React × DjangoRESTFramework で Googleログインボタンを実装するチュートリアル
全6partのうちのpart3です
part1から読む場合はこちら
part0(導入偏)はこちら

Part3. フロントエンド作成

0. 流れの理解

このパートの流れは以下の通りです。

Reactプロジェクト作成
ライブラリインストール
変数設定ファイル作成
フロント画面作成
動作確認

前パートで起動したDjangoは起動したままにして、
新しいターミナルを開いて作業します

1. React プロジェクト作成

$ cd ~/
$ npx create-react-app frontend
$ cd frontend

2. ライブラリインストール

$ npm i react-google-login axios

react-google-login : ReactでGoogleLogin関連の便利なツールを提供してくれます facebookのやつとかもあるので、余力があれば導入しよう
axios : HTTPクライアントです DRFのAPIをたたくのに使います fetchでもいいと思います

3. .env作成

Google Cloudで発行したOIDC鍵のCLIENT_IDと、
さっきDjangoの管理画面で作成したApplicationに記載されていたClientId,Client secretを変数として格納します

$ vi .env

REACT_APP_GOOGLE_CLIENT_ID=499058585498-xxxxxxxxxxxxx.apps.googleusercontent.com
REACT_APP_DRF_CLIENT_ID=ZEmxjwB8IjA1OiD7R6AY3aBUrho4X080yqeOxxxx
REACT_APP_DRF_CLIENT_RECRET=Taj1m0q8QXlGmTDr3IJasuEVJ1M2n7dxxxx

4. フロント画面作成

いよいよボタンを画面に表示していきます

Reactプロジェクト起動

$ npm start

ライブラリインポート

App.js

// ライブラリインポート
import GoogleLogin from "react-google-login";
import axios from "axios";

変数設定

App.js

// .env情報取得
const googleClientId = process.env.REACT_APP_GOOGLE_CLIENT_ID;
const drfClientId = process.env.REACT_APP_DRF_CLIENT_ID;
const drfClientSecret = process.env.REACT_APP_DRF_CLIENT_RECRET;
const baseURL = "http://localhost:8000";

ボタン表示

<GoogleLogin {option} /> で表示する

App.js

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <h1>Google OAuth Test</h1>
        <GoogleLogin
            clientId={googleClientId}
            buttonText="Googleアカウントでログイン"
            onSuccess={(response) => handleGoogleLogin(response)}
            onFailure={(err) => console.log("Google Login failed", err)}
        ></GoogleLogin>
      </header>
    </div>
  );
}

認証成功時の関数作成(=onSuccess)

App()内に追加していきます

App.js

function App() {

  // 認証成功時の動作
  const handleGoogleLogin = (response) => {
  	console.log(response)
  	axios
    	.post(`${baseURL}/auth/convert-token`, {
      	token: response.accessToken,
      	backend: "google-oauth2",
      	grant_type: "convert_token",
      	client_id: drfClientId,
      	client_secret: drfClientSecret,
    	})
    	.then((res) => {
      	const { access_token, refresh_token } = res.data;
      	console.log({ access_token, refresh_token });
      	localStorage.setItem("access_token", access_token);
      	localStorage.setItem("refresh_token", refresh_token);
    	})
    	.catch((err) => {
      	console.log("Error Google Login", err);
    	})
  }

	return (
    // 略
  );
}