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

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

本記事は、React × DjangoRESTFramework で Googleログインボタン を実装するチュートリアル  
全6partのうちのpart1です  
part0(導入偏)は[こちら](https://qiita.com/cokemaniaIIDX/items/41b268c87b7344fbb3c1)

# Part1. Google認証情報作成

## 0. 流れの理解

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

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

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

[GoogleCloud](https://console.cloud.google.com/) にアクセスし、サンプル用にプロジェクト作成します

![create-new-project-1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/341857/d4c43cd5-a89b-e038-766e-caad79fcd543.png)

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

![create-new-project-2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/341857/3bcd3bb3-4534-8e02-4837-7bf802a0a603.png)
`プロジェクト名`を適当に決めて、`作成`

## 2. 認証情報作成

![create-new-project-3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/341857/478d4b39-9c78-162a-3907-dc97def9ccbf.png)

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

- 同意画面作成

![create-new-project-4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/341857/034c6a20-2425-0440-89db-fbbfbf48ca8c.png)

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

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

![google_auth.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/341857/78195072-55dd-f518-7712-b4d5aafafe40.png)

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

![create-new-project-5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/341857/b77a5f6c-a876-9bce-6740-960e08440fa3.png)


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

![create-new-project-6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/341857/50dab9cd-ec34-f4bf-5cca-2b20eccea37c.png)

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

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

埋めたら`保存して次へ`

![create-new-project-7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/341857/de2f67e9-0632-b76d-f6ad-22ac3b7c85d6.png)
このページ以降、特別な設定は行わないのですべて`保存して次へ`でOKです

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

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

![create-new-project-8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/341857/b75ab847-08c7-e35a-812e-c4cd9c206c2b.png)

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

![create-new-project-9.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/341857/047ad229-f590-dfe1-dd5b-acac866f5b0a.png)

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

![create-new-project-10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/341857/587c823c-09e9-3f0f-7317-8413f61571da.png)

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

![create-new-project-11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/341857/3e5b71c5-dd62-38c4-ada4-07c98ad660da.png)

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

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

入力したら`作成`

![create-new-project-12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/341857/3edb1df7-3d80-541c-88ce-bdeaadff7da7.png)

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


# Part1 終了

お疲れ様です  
[次のPart](https://qiita.com/cokemaniaIIDX/items/b0a6a08e02b45efdc9e4)でバックエンドの設定を行います