shuhelohelo’s blog

Xamarin.Forms多めです.

ASP.NET CoreでOAuthを試す(1)

ログインする際に,GoogleFacebookなどの外部サービスの認証を使用することは割とよくあります. 例えば以下のような画面をよく見ると思います.

f:id:shuhelohelo:20191222155208p:plain

これを自作のWebアプリケーションに組み込む手順です. 今回はGoogle側のAPI設定の説明です.

環境

動画

こちらの動画がとても詳しく,動画のとおりに進めていけば,Google認証をWebアプリケーションに組み込むことができます.

Create google oauth credentials Client Id and Client Secret

Googleでアプリケーションを登録する

Step1. プロジェクトの作成

以下のURLを開く. console.developers.google.com

規約に同意して続行 f:id:shuhelohelo:20191117134107p:plain

こんな無料トライアルの案内がでていたので,有効化する.

f:id:shuhelohelo:20191117134244p:plain

すると,以下のようなダッシュボードが表示されます.

f:id:shuhelohelo:20191222160350p:plain

ここからプロジェクトを作成します.

すでにプロジェクトを作成してしまっているので,プロジェクト名が表示されていますが,この部分をクリックし,既存のプロジェクトの選択や新規プロジェクトの作成を行います.

f:id:shuhelohelo:20191222160509p:plain

以下のようなダイアログが開くので右上の「新しいプロジェクト」をクリックします.

f:id:shuhelohelo:20191222160657p:plain

「新しいプロジェクト」を作成する画面が表示されるので,プロジェクト名に任意のプロジェクト名を指定(ここではMy OAuth Projectとしました)し,場所については今回はそのまま「組織なし」として「作成」ボタンを押します.

f:id:shuhelohelo:20191222160938p:plain

しばらくすると,プロジェクトの作成が完了し,プロジェクトのダッシュボードが表示されます.

Step 2. Google+ APIの有効化

左上のハンバーガーメニューの隣の「Google APIs」をクリックすると,以下のようなメニューが表示されます.

f:id:shuhelohelo:20191222161541p:plain

この中から「ライブラリ」を選択します.表示されるページに検索欄があるので「Google+ api」を検索します.

f:id:shuhelohelo:20191222161927p:plain

Google+ API」を選択して,これを有効にします.

f:id:shuhelohelo:20191222162131p:plain

Step 3. OAuthの設定

次にまた左上の「Google APIs」をクリックしてメニューを表示させ,「OAuth同意画面」を選択し,User Typeに「外部」を選んで「作成」ボタンをクリックします.

f:id:shuhelohelo:20191222162603p:plain

次の画面ではこのGoogleのOAuthを利用するアプリケーションの名前(何でも良い)や,ロゴ(任意)などを指定します. ここではアプリケーション名だけ指定(My OAuth Test)して,一番下の「保存」ボタンを押します.

Step 4. OAuthクレデンシャルの発行

最後に,GoogleのOAuthを利用するために「OAuth クライアントID」を作成します.

いつもどおり左上の「Google APIs」をクリックしてメニューから「認証情報」を選択し,「認証情報を作成」→「OAuthクライアントID」を選択します.

f:id:shuhelohelo:20191222163835p:plain

今回はWebアプリケーションから使用するので,アプrケーションの種類に「ウェブアプリケーション」を選びます.

名前は「My OAuth Test Client」としました.

f:id:shuhelohelo:20191222164722p:plain

ここで重要なのは「承認済みのJavaScript生成元」と,「承認済みのリダイレクトURI」の2つの項目です.

「承認済みのJavaScript生成元」にはウェブアプリケーションのホストのURIを指定します.今回はlocalhostから利用することになるので,デバッグ時のアプリケーションのURIを指定します.

デバッグ時のアプリケーションのURIVisual Studioのプロジェクトのプロパティからデバッグタブを開くと以下のように確認できます.

f:id:shuhelohelo:20191222165521p:plain

このURIを「承認済みのJavaScript生成元」に指定します. このとき,末尾の/は不要なので取り除きます.

「承認済みのリダイレクトURI」には「承認済みのJavaScript生成元」に指定したアプリケーションのホストのURIsignin-googleを追加したURI(ここではhttps://localhost:44358/signin-google)を指定して,「作成」ボタンを押すと,クライアントIDとクライアントシークレットが表示されます.

f:id:shuhelohelo:20191222170347p:plain

これでGoogleのOAuthの利用準備は完了です.

次へ

shuhelohelo.hatenablog.com