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

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

Part1. Google認証情報作成

0. 流れの理解

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

1. GoogleCloud でプロジェクト作成
2. OAuth同意画面の設定
3. DjangoアプリとGoogleCloudプロジェクトを結びつける認証情報の作成

1. Google Cloud でプロジェクト作成

GoogleCloud にアクセスし、サンプル用にプロジェクト作成します

左上のプルダウンをクリック後、新しいプロジェクトをクリック

プロジェクト名を適当に決めて、作成

2. 認証情報作成

左上のプルダウンが作成したプロジェクトにかわってることを確認して、
左上のバーガーメニューからAPIとサービス、その中の認証情報をクリック

• 同意画面作成

認証情報は同意画面を作成しないと作れないので、
同意画面を設定を先にクリック

この同意画面というのは、Googleログインボタンを押したときに出てくる↓のような画面のことです

では同意画面の設定をすすめましょう

外部のユーザを受け付ける想定なので、外部を選択して作成

アプリ名, ユーザーサポートメール, デベロッパーの連絡先情報 メールアドレスが必須項目なので埋めます

• アプリ名 : 先ほど例示した同意画面で表示されるアプリ名になります

埋めたら保存して次へ

このページ以降、特別な設定は行わないのですべて保存して次へでOKです

スコープに関してだけ、
スコープを追加または削除ボタンを押すと、画像右のようなメニューが出てきます
このスコープは、アプリがログインするユーザのどの情報にアクセスできるかを決めるものです
よく、「○○」が「××」へのアクセスを求めてますって出てきますよね。あれの「××」の部分です。

このチュートリアルでは、DjangoRESTframework側でuserinfo.email,userinfo.profileを許可するように設定するので、
ここでは設定せずに保存して次へに進んでOKです

先述したように、何もせず保存して次へでOK

完了です
設定内容を確認したら、続いて認証情報を作成します
左メニューの鍵マークをクリック

画面上の認証情報を作成から、OAuthクライアントIDをクリック

アプリケーションの種類, 名前, 承認済みのJabaScript生成元, 承認済みのリダイレクトURIを埋めます

• アプリケーションの種類 : ウェブ アプリケーションを選択します
• 名前 : OAuth同意画面と同じにしておきます 注意書きにある通りエンドユーザには関係のない部分なので適当でいいでしょう
• JS生成元 : http://localhost:3000 (= React プロジェクト) を指定します
• リダイレクトURI : こちらも http://localhost:3000 を指定します

入力したら作成

これにて認証情報が作成されました！
このあとこの認証方法を使ってReact,DRFでやりとりします
JSONをDLするか、クライアントIDとシークレットをメモ帳に保存しておきます

Part1 終了

お疲れ様です
次のPartでバックエンドの設定を行います