本記事は、Ashutosh Panda氏による「Google Login with Django & React --- Part 3」（2021年4月23日公開）の和訳を、著者の許可を得て掲載しているものです。

■シリーズ内容
【前編】Google Developer ConsoleからクライアントIDとクライアントシークレットを取得する
【中編】Django Rest Frameworkバックエンドを作成する
【後編】Reactアプリを作成する

#Reactアプリを作成する

ReactとDjango Rest FrameworkでGoogle Oauth 2.0を使う方法を確認してみよう。

ソースコード：https://github.com/aashutoshPanda/google-oauth-django-react

Reactアプリはとてもシンプルです。Googleログインボタンをクリックすると、アクセストークンとリフレッシュトークンをコンソールに出力し、ローカルストレージに保存します。

##ステップ1：Reactアプリを起動する

cd client/

React Google Loginをインストールします。

npm i react-google-login axios

##ステップ2：環境変数を作成する

まず、クライアントIDとクライアントシークレットを保持する.envファイルをクライアントフォルダ内に作成します。

REACT_APP_GOOGLE_CLIENT_ID=458276157074-n3mk96a65qov0f538dg4ci4djjdf1s11.apps.googleusercontent.com
REACT_APP_DRF_CLIENT_ID=UmWMYNbhOaSGwS0U1GaYbDPFBH7xDmm6A8YWLk5a
REACT_APP_DRF_CLIENT_SECRET=gnBTKIVHWQ0QqsJI7qjzuvc998vKZVo6tnHRUQHxbnYLPH2F0QhubrM00V5xYhLm15cBlLY8loCGUytWE2RQLanBBp4KdWve4mUm4c7agmHQjZd40nB1n6cMyAWKQUWC

.env

注：

「create-react-app」で作成したReactアプリのすべてのenv変数は、「REACT_APP_」で始める必要があります。
REACT_APP_GOOGLE_CLIENT_IDは、Google Developers Consoleから取得します。
REACT_APP_DRF_CLIENT_IDとREACT_APP_DRF_CLIENT_SECRET はDjangoのadminから取得します。

##ステップ3：認証ロジックを処理するため、App.jsを編集する

App.js

import GoogleLogin from "react-google-login";
import axios from "axios";
// get env vars
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_SECRET;
const baseURL = "http://localhost:8000";

const handleGoogleLogin = (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);
      });
   };

   const App = () => {
      return (
         <div className="App">
            <GoogleLogin
               clientId={googleClientId}
               buttonText="LOGIN WITH GOOGLE"
               onSuccess={(response) => handleGoogleLogin(response)}
               render={(renderProps) => (
                  <button
                     onClick={renderProps.onClick}
                     disabled={renderProps.disabled}
                     type="button"
                     class="login-with-google-btn"
                  >
                     Sign in with Google
                  </button>
               )}
               onFailure={(err) => console.log("Google Login failed", err)}
            />
         </div>
      );
   };
   export default App;

snippet.js

##ステップ4：Reactアプリを実行して、テストする！

npm start

注：Reactサーバーの起動後にReact環境変数を変更した場合は、必ず再起動して変更内容を確認します。

https://giphy.com/gifs/acmJnXubjiKmWcje1d?utm_source=iframe&utm_medium=embed&utm_campaign=Embeds&utm_term=https%3A%2F%2Fcdn.embedly.com%2F

このチュートリアルで使用されているパッケージは以下の通りです。

https://www.npmjs.com/package/react-google-login

これで「後編」は終わりです。
この記事が少しでもお役に立てれば嬉しいです✌️

##翻訳協力

この記事は以下の方々のご協力により公開する事ができました。改めて感謝致します。

Original Author: Ashutosh Panda
Original Article: Google Login with Django & React --- Part 3
Thank you for letting us share your knowledge!

選定担当: @gracen
翻訳担当: @gracen
監査担当: -
公開担当: @gracen

##ご意見・ご感想をお待ちしております
今回の記事はいかがでしたか？
・こういう記事が読みたい
・こういうところが良かった
・こうした方が良いのではないか
などなど、率直なご意見を募集しております。
頂いたお声は、今後の記事の質向上に役立たせて頂きますので、お気軽に
コメント欄にてご投稿ください。Twitterでもご意見を受け付けております。
皆様のメッセージをお待ちしております。