Visual Studio Express 2012 for Web でいってみる ８.OAuth/OpenId認証（その1）
MVC4のテンプレート内のOAuth/OpenId認証をやってみました。（その1）
まだ最後まで行きつけていないのですが、忘れないようにメモを残しておきます。
初心者が行き当たりばったりにいろいろ動かしてみたときのメモなので記載内容には勝手な解釈や誤りもあるかと思います。そのあたりのご指摘よろしくお願いします。
まず、参考にした情報は
『How integrate Facebook, Twitter, LinkedIn, Yahoo, Google and Microsoft Account with your ASP.NET MVC application』
英語のページですが取り敢えずこのページを読めばMVC4のテンプレートつかっての認証はクリアできそうです。
もう一つ
miso_soup3 さんの『MVC4のテンプレート内に追加されたOAuth/OpenId認証』
http://d.hatena.ne.jp/miso_soup3/20120818/1345291686
基本的な手順と『twitter』でログオンの組み込みはこのページを読めばまず大丈夫です。感謝、感謝。
そこで、今回は『twitter』以外の『Facebook』と『Google』、『Windows Live』(?)へのチャレンジ内容を中心にメモを残しておきます。但し、結果を先に言っておくと、『Windows Live』についてはログインまで行きつけていません。残念無念。
さて、「新しいアプリケーション」を「MVC4アプリケーション」を指定してデフォルトのまま作成します。
さっそくF5：デバッグを実行して ホームページが表示されてページ右上にある「ログイン」リンクを押すと、以下のようなログインページが表示されます。
今回は右側にある「別のサービスを使用してログイン。。。」これを使います。
とは言ってもMVCでの設定自体はとても簡単。
[App_Start]-[AuthConfig.cs]の設定だけで外部サービスのログイン機能が呼び出せます。
[AuthConfig.cs]を開くと、
どーっとコメントアウトされていますが、ここにパラメータをセットすればOK。
なので、今回のメモは、ここの値はどこから持ってくるのかって内容になります。
こんな風にパラメータをセットすると
こんな風に右側の「別のサービスを使用してログイン。。。」に各サービスでのログインリンクボタンが現れます。ちょっと淡泊すぎ？。そのままではちょっとの見た目ですが、お好みに応じて [_ExternalLoginsListPartial.cshtml] や CSSを調整しましょう。
ちなみに、このページで『FaceBook』ボタンを押すとFaceBookのログインページに接続されます。
このページでログインが完了すると、MVCアプリに戻り、以下のページが表示されます。
※何故か「アカウント@ViewBag.ProviderDisplayName によって正常に認証されました。」って表示されてるのが気になりますね。そこでスクリプトみてみると
<strong> アカウント@ViewBag.ProviderDisplayName</strong> によって正常に認証されました。
となっています。アカウントと@ViewBagの間にスペース突っ込むと正常に表示されます。
このページの「登録」ボタンの押下で、ローカルのユーザーIDとユーザー名が登録されると共にFacebookのユーザーIDとローカルのユーザーIDのひも付が行われます。
尚、１ユーザーで複数の外部サービス認証を行う場合は、「アカウントの管理」ページの「外部ログインの追加」で行います。
それでは、[AuthConfig.cs]のパラメータ設定についてです。
標準テンプレートでは、「Microsoft」、「Twitter」、「Facebook」、「Google」の４つが用意されています。
「Twitter」では「clientId」と「clientSecret」をセットしますが、この値の取得方法については前出の
miso_soup3 さんの『MVC4のテンプレート内に追加されたOAuth/OpenId認証』
http://d.hatena.ne.jp/miso_soup3/20120818/1345291686
に詳しく記述さてますんでそちらを参考にしてください。
「Google」は、// のコメントを外すだけで動き出します。
※2014/11/27追記
googleはコメント外すだけでは動作しなくなってます。
Visual Studio Express 2012 for Web でいってみる 23.OAuth/OpenId認証（その3）MVC4でGoogle+ 認証を使う - 喜帳面の日記
を参照ください。
「Facebook」の場合は「appId」と「appSecret」をセットします。
この値の入手については以下の手順でやってみました。
※Facebookの普通のアカウントは登録済みであることが前提です。
１．Developer 登録
https://developers.facebook.com/apps
にアクセスして
右上の「Register as a Developer」ボタンを押下。
「アカウントの認証」を選択
パスワードを入力して「続行」
携帯電話のメールアドレスが要求されます。携帯キャリアのメールが必要で、@gmail.comとかフリーメールは使用できません。
メルアド入力して「承認」
携帯にメールで「確認コード」が送付されてきます。
携帯メール確認コードを入力して「承認」。
Policyに同意チェックを入れて「続行」
いろいろ聞かれます。お答えをチェックして「続行」
Developer 登録はこれで完了。
次は、「アプリ」を登録します。
２．アプリの登録
「新しいアプリを作成」を選択
適切なアプリ名を登録して「続行」
アプリの基本設定ページです。
「App ID」と「App Secret」を[AuthConfig.cs]のFacebookのパラメータにコピペしてセットします。
あとこのページの「Website with Facebook Login」の「サイトURL」を登録しないとダメっぽいです。「Twitter」の場合はなんか適当なURLでもデバッグできたのですが、「facebook」の場合はエラーになり戻ってこれないようです。
このアプリはまだインターネットにリリースしていない状況なので、ローカルでのデバッグ実行もしくは、ローカルにリリースしてテストしています。
そこで、サイトURLにはローカルを指定しました。
「例：http://localhost:52946/」:52946のポート番号は、環境というかアプリ毎に異なりますのでデバッグ実行して確認してください。
「変更を保存」これで準備完了です。デバッグ実行で動作を確認できます。
最後に「Windows Live アカウント」(?正式名知らないです)ですが、先にメモしたようにデバッグ実行まで行きつけてません。なので、以下の手順については、正しくない可能性が大ではありますが取り敢えずメモしておきます。
[AuthConfig.cs]の[OAuthWebSecurity.RegisterMicrosoftClient]のパラメータは、[clientId]と[clientSecret]です。この値の入手方法は、多分。。。
Live Connect デベロッパー センター
http://msdn.microsoft.com/ja-JP/live/
にアクセス
[マイアプリ]を選択、アプリケーション管理ページで「サインイン」
「アプリケーションをWindows Live に接続します」のページでアプリケーション名を入れて使用条件に同意すると
このページに表示される[クライアントID]と[クライアントシークレット]が[clientId]と[clientSecret]にそれぞれ相当するんだろうと思います。
次のステップへ進んで、以下は、マイアプリケーションの「API設定」ページです。
このページに「リダイレクトドメイン」という項目があります。
この、「リダイレクトドメイン」が省略可能か必須項目かがわからないのです。
現時点で、デバッグ実行すると
「The provided value for the input parameter 'redirect_uri' is not valid. The value must be an absolute URL whose scheme is http:// or https://. 」
とエラーになってしまいます。http://localhost:99999/ とかはそもそも登録できないし、「てきとうなURL」でもダメ。省略しても同じ状況です。そもそもローカルでのデバッグやテストはできないんでしょうかね。azureに行けってことかな？
ということで、MicrosoftClientでの認証は今のところオクラ入りしてしまいました。
以上、
初心者が行き当たりばったりにいろいろ動かしてみたときのメモなので記載内容には勝手な解釈や誤りもあるかと思います。そのあたりのご指摘よろしくお願いします。
