モバイル版OAuthの便利な活用方法

こんにちは、IDプラットフォーム技術の近藤です。

先月末にひっそりとモバイル版OAuthをリリースしました。それに併せてYJDNのOAuthのドキュメントで分かりづらかった部分を更新しています。OAuthのパラメータで最も分かりにくいことで評判(?)なsignatureの生成方法をリクエストの署名で詳しく解説していますので、今まで自前でsignatureのロジック実装に挑戦していた開発者の参考になればと思います。

さて、どこがモバイル対応になったのかと言いますと、OAuthのフローの『2. End Userの認可要求』に記載してある、リクエストで指定するパラメータが一つ増えています。ここでConsumerが xoauth_yahoo_mobile=1と指定することでケータイ向けの同意画面を表示させることが可能です（ユーザーがログイン状態でない場合は同意画面の前にログイン画面が挟まれます）。これによりモバイルのConsumerからもOAuth対応APIを利用できるようになりました。

また、ケータイからでもOAuthを利用できるようになったことでモバイルサイトだけでなく、PC以外のデバイス上に実装されるクライアントアプリケーションからの利用がしやすくなりました。例えば、インターネットにつながっているテレビ上で動作するウィジェットでどう利用するか考えてみましょう。

ユーザー認証が必要なAPIを使ったウィジェットを実装したい場合に、文字入力などの操作や表示方法に制約があるテレビ画面上でID・パスワードの入力させたりユーザーの同意確認が必要な注意事項を表示させたりするにはユーザビリティー上問題があります。そこでユーザーが普段から使い慣れているケータイを使ってID・パスワードの入力と同意確認のフローを行わせることで、ユーザーの操作の負荷を軽減させることが可能です。

下の図のようなイメージをすれば分かりやすいかと思います。

このQRコードから読み取れるURLには、2つの種類が考えられます。

ひとつは、『1. Request Tokenの取得』のレスポンスに含まれる xoauth_request_auth_url のURLの末尾にモバイル表示のパラメータを付加したURLです。こちらを使用する方がユーザーにとって便利でしょう。取得したRequest Tokenが 'xxxxxxx' であった場合のURLはこのようになります。

二つ目はテレビの画面上にコード（Request Token）を表示して、ケータイで下記のURLにアクセスすると表示される"コード入力画面"からユーザーにTokenを入力させることも可能ですが、画面のステップ数が増えユーザビリティーの面で劣るためオススメしません。

ユーザーが注意事項への同意を完了すると、下図のようにケータイの画面に6けたの英数字のコードが表示されます。このコードはOAuthのフローの『3. Access Tokenの取得』で使うoauth_verifierの値です。ウィジェット側でそれを受け取るためにコード入力画面を用意し、ユーザーに入力させるように誘導する必要があります。OAuthの仕様上、クライアントアプリではここでどうしてもユーザーによる入力操作が必要になってしますが、ユーザーにとって必要最小限の手間となるようにしております。

このようなPC以外のデバイス向けのアプリケーションを個人の開発者が実装するのは敷居が高いと思いますが、通常のPC上で動作するウィジェットでユーザー認証させたい場合でも同様に、xoauth_request_auth_url のURLをウェブブラウザで開かせて、"ログイン"⇒"同意"⇒"コード（oauth_verifier）の表示"のステップを経て、ウィジェット上にコードを入力させるというフローになります。クライアントアプリケーションで何かアイディアがある方はチャレンジしてみてくださいｗビジネス向けにもOAuth対応のAPIを提供していますので、モバイル版OAuthを活用したID連携や商用API利用も可能です。

Yahoo!で一般公開のOAuth対応APIはまだ少ないですが、今後どんどん出てくる予定ですのでぜひいろいろ活用してみてください\(^o^)／

Yahoo!デベロッパーネットワーク - OAuth
Yahoo!デベロッパーネットワークは こちら