LoginSignup
4
6

More than 1 year has passed since last update.

ReactとDjangoでGoogle OAuthログイン【前編】Google Developer ConsoleからクライアントIDとクライアントシークレットを取得する

Last updated at Posted at 2021-05-24

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

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

Google Developer ConsoleからクライアントIDとクライアントシークレットを取得する

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


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

ステップ1:https://console.cloud.google.com/で新しいプロジェクトを作成する

「プロジェクトを作成」をクリックして、新しいプロジェクトを作成する。

「作成」をクリックして、プロジェクトを作成する。

ステップ2:OAuth画面を設定する

「認証情報を作成」をクリックし、「OAuthクライアントID」を選択します。次の画面で「同意画面を構成」をクリックします。

「同意画面を構成」をクリックする。

「作成」をクリックする。

次の画面でアプリケーション名(例:OAuth Demo)、サポートメール、デベロッパーの連絡先情報を入力し、他の項目は空のままにします。それ以降の画面では、他の項目は何も変更しません。

ステップ3:クライアントIDとクライアントシークレットを作成する

ダッシュボードで「認証情報を作成」をクリックし、「OAuthクライアントID」を選択します。以下の項目を選択/入力します。

  • アプリケーションの種類:ウェブアプリケーション
  • 名前:Oauth Demo
  • 承認済みのリダイレクトURI:http://localhost:3000

注:localhost:3000の後に「/」はつけません。

ステップ4:クライアントIDとクライアントシークレットをどこかにコピーする

クライアントIDとクライアントシークレットをコピーする。

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

翻訳協力

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

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

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

ご意見・ご感想をお待ちしております

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

4
6
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
6