ASP.NET CoreでOAuthを試す(1)
ログインする際に,GoogleやFacebookなどの外部サービスの認証を使用することは割とよくあります. 例えば以下のような画面をよく見ると思います.
これを自作のWebアプリケーションに組み込む手順です. 今回はGoogle側のAPI設定の説明です.
環境
- Visual Studio 2019 16.4 preview
- ASP.NET Core 3.1 preview
動画
こちらの動画がとても詳しく,動画のとおりに進めていけば,Google認証をWebアプリケーションに組み込むことができます.
Create google oauth credentials Client Id and Client Secret
Googleでアプリケーションを登録する
Step1. プロジェクトの作成
以下のURLを開く. console.developers.google.com
規約に同意して続行
こんな無料トライアルの案内がでていたので,有効化する.
すると,以下のようなダッシュボードが表示されます.
ここからプロジェクトを作成します.
すでにプロジェクトを作成してしまっているので,プロジェクト名が表示されていますが,この部分をクリックし,既存のプロジェクトの選択や新規プロジェクトの作成を行います.
以下のようなダイアログが開くので右上の「新しいプロジェクト」をクリックします.
「新しいプロジェクト」を作成する画面が表示されるので,プロジェクト名に任意のプロジェクト名を指定(ここではMy OAuth Project
としました)し,場所については今回はそのまま「組織なし」として「作成」ボタンを押します.
しばらくすると,プロジェクトの作成が完了し,プロジェクトのダッシュボードが表示されます.
Step 2. Google+ APIの有効化
左上のハンバーガーメニューの隣の「Google APIs」をクリックすると,以下のようなメニューが表示されます.
この中から「ライブラリ」を選択します.表示されるページに検索欄があるので「Google+ api」を検索します.
Step 3. OAuthの設定
次にまた左上の「Google APIs」をクリックしてメニューを表示させ,「OAuth同意画面」を選択し,User Typeに「外部」を選んで「作成」ボタンをクリックします.
次の画面ではこのGoogleのOAuthを利用するアプリケーションの名前(何でも良い)や,ロゴ(任意)などを指定します. ここではアプリケーション名だけ指定(My OAuth Test)して,一番下の「保存」ボタンを押します.
Step 4. OAuthクレデンシャルの発行
最後に,GoogleのOAuthを利用するために「OAuth クライアントID」を作成します.
いつもどおり左上の「Google APIs」をクリックしてメニューから「認証情報」を選択し,「認証情報を作成」→「OAuthクライアントID」を選択します.
今回はWebアプリケーションから使用するので,アプrケーションの種類に「ウェブアプリケーション」を選びます.
名前は「My OAuth Test Client」としました.
ここで重要なのは「承認済みのJavaScript生成元」と,「承認済みのリダイレクトURI」の2つの項目です.
「承認済みのJavaScript生成元」にはウェブアプリケーションのホストのURIを指定します.今回はlocalhostから利用することになるので,デバッグ時のアプリケーションのURIを指定します.
デバッグ時のアプリケーションのURIはVisual Studioのプロジェクトのプロパティからデバッグタブを開くと以下のように確認できます.
このURIを「承認済みのJavaScript生成元」に指定します.
このとき,末尾の/
は不要なので取り除きます.
「承認済みのリダイレクトURI」には「承認済みのJavaScript生成元」に指定したアプリケーションのホストのURIにsignin-google
を追加したURI(ここではhttps://localhost:44358/signin-google
)を指定して,「作成」ボタンを押すと,クライアントIDとクライアントシークレットが表示されます.
これでGoogleのOAuthの利用準備は完了です.
次へ