2024
11
22
2013
08
31
日本製BaaS:appiaries を使ってみる。その5
今回は、日本製のBaaS:appiaries(アピアリーズ)のユーザー機能の使い方の第2弾です。
前回の記事「日本製BaaS:appiaries を使ってみる。その4」では、次の4点をappiaries(アピアリーズ)のユーザー機能のポイントとし、基本設定部分について説明しました。
- コールバックURLを設定する。
- JSONオブジェクトの作成権限を"SIGN IN"とする。
- ページに認証ページへのリンクを設定する。
- 認証後の処理を記述する。
- 投稿ボタンを押したときの処理を記述する。
今回は、このうち3番目の「ページに認証ページへのリンクを設定する。」の部分についての話です。
ページに認証ページへのリンクを設定する。
appiaries(アピアリーズ)の登録ユーザーに限って、投稿できるというような設定にした場合、ユーザーが登録ユーザーなのかを判断しなければなりません。このためには、一度、ユーザーにappiaries(アピアリーズ)の認証を受けてもら必要があります。このためには、WEBページにappiaries(アピアリーズ)の認証ページへのリンクを設定します。
認証ページのURL
appiaries(アピアリーズ)の認証ページのURLは、次のようなものです。
https://api-oauth.appiaries.com/v1/auth ?response_type=token &scope=nickname &client_id=[client_id] &redirect_uri=[redirect_uri]
appiaries(アピアリーズ)の OAuth API を用います。 クエリーパラメータの概要は次のとおり。
respnpse_type
Implicit Grantでアクセストークンを取得する場合は「token」。 Authorization Grantで認可コードを取得する場合は「code」。
scope
取得するユーザー属性の範囲。指定がない場合は「userid」とみなされます。 「gender」、「picture」、「country」などの個別の属性や、やや範囲の広い「profile」などを指定できます。
client_id
「アプリ詳細」>「OAuth情報」の欄に表示されているアプリ固有の「クライアントID」です。
redirect_uri
「アプリ詳細」>「OAuth情報」の欄に追加した「リダイレクトURL」です。認証後、このパラメータで指定したURLにリダイレクトされます。
その他のパラメータ
コールバックURIに引き継ぐデータは「state」パラメータを使います。
「Implicit Grantでアクセストークンを取得する」
「appiary_1_O_1.js」を用いた認証ページへのリンク設定
「お試しアピアリーズ・ユーザー投稿掲示板」では、「お試しアピアリーズ appiary_1_0_1_js」を使って、appiaries(アピアリーズ)の認証ページへのリンクを設定しています。その手順の概略を示します。
HTMLでのリンク箇所
HTMLで、認証ページへのリンクを作成したい箇所にアンカーを設定しておきます。
<a id="login">Login</a>
Appiary オブジェクトの生成
「appiary.1.0.1.js」では、Appiary オブジェクトを作成して、そのプロパティ、メソッドを利用します。
var appiary = new Appiary( '_sandbox', '[アプリID]', '[アプリトークン]', '[クライアントID]', '[スコープ]' );
ログイン有無の判定
Appiary オブジェクトでは、ユーザーがログインしている場合には、「store_token」に値が入るようにしています。したがって、この真偽によってユーザーがログインしているか判断できます。
var login = document.querySelector('#login'); if(appiary.store_token){ //ログインしている場合の処理 //略 }else{ //ログインしてない場合の処理 login.setAttribute( 'href', appiary.oauth_url +'&redirect_uri='+location.href ); //略 }
認証用ページへのリンクの生成
上記のスニペットのとおり、リンク用のアンカー要素の href属性に認証用ページのURIを設定すれば、認証用ページへのリンクができあがります。
Appiary オブジェクトでは、「oauth_url」プロパティに認証用ページへの基本的なURIが埋め込まれますので、通常、リクエストパラメータに「redirect_uri」を付加すれば充分です。
上記の例では、処理を簡単にするため、自分自身(location.href)に認証後リダイレクトするようにしています。なお、このページのURLは、基本設定「アプリ詳細」>「OAuth情報」で「リダイレクトURL」として登録しておく必要があります。
全体の記述
認証用リンクの作り方は以上のとおりです。ただ、全体的な記述はわかりにくいかもしれません。そこで、「お試しアピアリーズ・ユーザー投稿掲示板」で使用しているコードを Gist に掲載しました。
Gist : appiary_sign_1_0_1.js
また、「appiary.1.0.1.js」の Gist は、「appiary.1.0.1.js」です。
関連ページ
- 「日本製BaaS:appiaries を使ってみる。」
- 「日本製BaaS:appiaries を使ってみる。その2」
- 「日本製BaaS:appiaries を使ってみる。その3」
- 「日本製BaaS:appiaries を使ってみる。その4」
関連リンク
- 「お試しアピアリーズ」
- 「お試しアピアリーズ・誰かの落書き」
- 「お試しアピアリーズ・ユーザー投稿掲示板」
- Gist : appiary_sign_1_0_1.js
- Gist : appiary.1.0.1.js
2013/08/31 (Sat.) Comment(0) appiaries
Comments