本記事は、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
注：
- 「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;
##ステップ4：Reactアプリを実行して、テストする！
npm start
注：Reactサーバーの起動後にReact環境変数を変更した場合は、必ず再起動して変更内容を確認します。
このチュートリアルで使用されているパッケージは以下の通りです。
これで「後編」は終わりです。
この記事が少しでもお役に立てれば嬉しいです✌️
##翻訳協力
この記事は以下の方々のご協力により公開する事ができました。改めて感謝致します。
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でもご意見を受け付けております。
皆様のメッセージをお待ちしております。