現在JavaScriptの設定が無効になっています。このページを利用するにはJavaScriptの設定を有効にしてください。~ログインボタンの設置~こんにちは、ID厨のくら(@kura_lab)です。みなさん「YConnect」をご存じでしょうか。Connectをサポートしたヤフーの新しい認証・認可のプロトコルなのです。IDであなたのウェブサイトにログインできたり、ユーザーの登録情報を取得してサービスに利用できたりします。APIも利用することができます。YConnectをぜひみなさんにご利用していただきたいということで実際にログイン機能を実装してみようと思います。SDK」をつかって爆速で実装しましょう。アプリケーションIDの発行はじめにYConnectのアプリケーションIDとシークレットを発行します。https://e.developer.yahoo.co.jp/dashboard/へアクセスして「新しいアプリケーションを開発」を押してしてください。今回はPHPを使ってサーバー側で認証を行うのでアプリケーションの種類は「サーバーサイド」を選択してください。その他必須項目を入力してください。利用するスコープはユーザーの登録情報取得のみの場合には不要なので選択しなくてもOKです。確認の前にきちんとガイドライン(https://about.yahoo.co.jp/docs/info/terms/chapter1.html#cf5th)を読んでおきましょう。入力内容の確認後、登録ボタンを押すことでアプリケーションIDとシークレットが発行されます。次に「アプリケーションの詳細」の「アプリケーション情報」タブのコールバックURLを追加します。ユーザーはログイン画面、YConnectの同意画面表示後に、ここで指定したURLにリダイレクトされます。ドメインだけでなくフルパスを指定することに注意です。この指定先に認証を実装することにします。コールバックURLを指定したら更新ボタンのクリックを忘れないようにしてください。開発の準備をしましょう。SDKをダウンロードして任意の場所に展開してください。TokenライブラリーのJWT.phpを以下のサイトからダウンロードして先ほど展開したlibディレクトリ下に配置してください。https://github.com/luciferous/jwt配置ができましたらlibディレクトリにPHPのパスを通して呼び出せるようにしてください。IDのログインボタンを設置します。以下から設置したいサイトにあわせてサイズを選びましょう。https://developer.yahoo.co.jp/yconnect/loginbuttons.html今回はこのサイズのボタンでこんな感じに配置しました。(このサイトは実在しません)ボタンの配置だけでもID連携らしくなったとおもいます。ボタンのリンク先には認証を実装するPHPファイルを指定しておきます。IDトークンで認証ここからPHPで実装していきます。認証までの処理をサンプルコードで解説していきます。ログインと同意のフローを実装していきます。以下のファイルはログインボタンのリンク先である「start.php」です。$prompt);各パラメーターの初期化を行います。ログイン画面・同意画面の表示の制御やテンプレートの選択などを設定していきます。ユーザーの登録情報の設定もここで設定します。パスを通したlibディレクトリ内のYConnect.incを読み込みます。アプリケーションの詳細で発行されたアプリケーションIDとシークレットを指定します。サンプルなのでハードコーディングしていますが、これらの値は外部に流出すると悪用されてしまうおそれがあるので管理には十分注意してください。アプリケーションの登録時に指定したコールバックURLを設定してください。stateは、CSRF対策としてリクエスト時の値とコールバックURLのクエリに付加された値が同じあるかを検証するための値です。毎回リクエストするたびに予測されにくいランダムな文字列を生成してください。stateの保存方法のひとつにCookieに発行しておく方法があります。その他にもPHPのセッションやHTML5のlocalStorageを利用する方法などもあります。nonceは、リプレイアタックの防止のために用いられます。毎回リクエストするたびにランダムな文字列を生成してください。後半のIDトークンの検証で必要になるので適宜保存してください。認証にはIDトークンを利用するため、レスポンスタイプに「OAuth2ResponseType::CODE_IDTOKEN」をしていしてください。今回のサンプルではユーザー識別子、プロフィール情報、メールアドレス、住所情報を取得するために全てのScopeを指定していますが、不要な情報の取得は避け、ウェブサイトの目的に合わせて必要最低限のScopeを指定するようにしてください。display(任意オプションで省略可)はデバイスに合わせて同意画面のテンプレートを出しわけるために指定します。デフォルトの「OIDConnectDisplay::DEFAULT_DISPLAY」を指定した場合、PC版のテンプレートが表示されます。スマートフォン版を表示したい場合は「OIDConnectDisplay::SMART_PHONE」を指定してください。prompt(任意オプションで省略可)はログイン画面、同意画面の表示を制御するためのパラメーターです。「OIDConnectPrompt::LOGIN」を指定するとログイン(パスワード再確認)表示を強制することができます。「OIDConnectPrompt::CONSENT」を指定すると同意画面表示を強制することができます。複数の条件を設定することができます。続いてはログイン画面と同意画面へリダイレクトさせる処理です。デバッグのときはYConnectClient::enableDebugMode()でログの出力を有効にしておくと便利です。デバッグログを有効にします。Apacheのログにデバッグのためのログが出力されます。パラメーターを設定してAuthorizationエンドポイントにリクエストします。displayとpromptは任意のオプションなので省略することができます。内部の処理としてはLocationヘッダーでリダイレクトさせています。Codeフロー)を参照してください。Authorizationエンドポイントへリダイレクトした後は以下のような同意画面が表示されます。設定したアプリケーション名やサイトURLが表示されています。アプリケーションへの許可には、Scopeで指定した項目が列挙されているのが確認できると思います。ログインと同意のフローの後は、コールバックURLにリダイレクトされます。クエリに認可コードがついてくるので値をとりだしてIDトークンの取得と検証まで実装しましょう。以下のファイルはコールバックURLに登録した「signup.php」です。ログインセッションの発行など...(8)このサンプルでは取得したデータはセッションを使って保存していますが、実際に実装するときは開発環境に応じた保存方法を利用しましょう。保存の際にはアクセストークンやリフレッシュトークンなどが外部から読み取られないようにしないといけないので注意してください。クエリから認可コードを抽出します。引数のstateははじめにリクエストしたときにCookieなどに保存していた値を指定します。getAuthorizationCode()の内部でstateが一致しているか検証しています。発行された認可コードはアクセストークン、IDトークンを取得するために必要な値です。Tokenエンドポイントにリクエストしてアクセストークン、リフレッシュトークン、IDトークンの値を受け取ります。受け取ったトークンはYConnectClientクラスのプロパティーに保持されているのでgetメソッドで取得することができます。「YConnectClient::requestAccessToken()」でリクエストに失敗した場合、例外が投げられます。YConnectの利用中に起こるものとして認可コードの有効期限切れによる例外があります。有効期限切れの判定は「OAuth2TokenException::invalidGrant()」で行います。有効期限が切れていた場合は、はじめのAuthorizationエンドポイントのリクエストからやり直してください。IDトークンの検証を行います。リクエスト時のnonceを引数に指定してください。IDトークンが正しく検証できた場合、YConnectClientクラスのプロパティーに保持されているアクセストークン、リフレッシュトークンを取得します。「YConnectClient::verifyIdToken()」で検証に失敗した場合、例外が投げられます。復号化されたIDトークンのオブジェクトを取得します。このオブジェクトにはユーザー識別子が含まれおり、認証後のログインセッションやデータ管理のキーとして利用することもできます。IDトークンの検証が正常に行えた場合、ログインセッションを発行(通常はCookieとして発行)してログイン状態としてください。ウェブサイトの用途に合わせてサイトのポリシーに合わせた長さの有効期限で自前のログインセッションを発行してください。IDでログインできるようになりました。YConnectを利用することで、ウェブサイトでわずらわしいパスワードの管理を考える必要がなくなります。SDK」をつかってユーザーの登録情報を取得する方法について解説します。追記2013年3月4日(月)同意画面のサンプル画像を追加しました。JAPANでは情報技術を駆使して人々や社会の課題を一緒に解決していける方を募集しています。詳しくは採用情報をご覧ください。JAPANのサービス開発を支える技術やデザイン、文化を発信しています。Reserved.このページの先頭へ。