忍者ブログ

2018
07
24

[PR]

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

2018/07/24 (Tue.)

2013
09
03

日本製BaaS:appiaries を使ってみる。その7

今回は、日本製のBaaS:appiaries(アピアリーズ)のユーザー情報の取得について述べます。ユーザー機能の使い方の第4弾です。

appiaries(アピアリーズ)の Profile API

appiaries(アピアリーズ)の Profile API では、次のURLにアクセスして、ユーザー情報を取得します。

https://api-profiles.appiaries.com/v1/[データストアID]/[アプリケーションid]

そして、パラメータに access_token やユーザーデータの取得範囲(scope)を含めてリクエストすると、JSON データが返ってきますので、これを用いてユーザーデータを処理します。

「appiary_1_O_1.js」でのユーザー情報取得

「appiary_1_O_1.js」では、ユーザー情報取得用のURLは、Appiary オブジェクトの「profile_url」プロパティに格納しています。ユーザー情報を取得する際には、getUser()メソッドを実行します。

Appiary.prototype.getUser = function(settings){
 if(this.user_token&&settings){
    settings.data              = settings.data||{};
    settings.data.access_token = this.user_token;
    Appiary.x(this.profile_url,settings);
 }
}

上記のコード中「Appiary.x()」とあるのは、XMLHttpRequest です。引数の「settings」の1つとして「onload」にコールバック関数を指定して、取得したユーザーデータを処理します。

「appiary_1_O_1.js」を用いたユーザーデータの処理

お試しアピアリーズ・ユーザー投稿掲示板」では、Appiary オブジェクト生成時に、まずスコープとして"nickname"を指定しています。そして、コールバック関数で取得したニックネームをページに表示します。

appiary = new Appiary(
 '_sandbox',
 '[アプリID]',
 '[アプリトークン]',
 '[クライアントID]',
 'nickname'
);

login = document.querySelector('#login');

appiary.show_nickname=function(e){
  if(typeof e.target.responseText=='string'){
     var res = JSON.parse(e.target.responseText);
     login.innerHTML  = res.nickname;
  }
}

appiary.getUser({'onload':appiary.show_nickname});

取得したデータを「JSON.parse()」でJavaScriptオブジェクトに変換しているところがポイントですね。また、その引数が「e.target.responseText」となっているところは注意。「e.target」が元となる「XMLHttpRequest」オブジェクトです。

次回は、JSONデータの作成がappiaries(アピアリーズ)ユーザーに限定されている場合の処理について述べます。

関連ページ
関連リンク
PR

2013/09/03 (Tue.) Comment(0) appiaries

2013
09
03

日本製BaaS:appiaries を使ってみる。その7

今回は、日本製のBaaS:appiaries(アピアリーズ)のユーザー情報の取得について述べます。ユーザー機能の使い方の第4弾です。

appiaries(アピアリーズ)の Profile API

appiaries(アピアリーズ)の Profile API では、次のURLにアクセスして、ユーザー情報を取得します。

https://api-profiles.appiaries.com/v1/[データストアID]/[アプリケーションid]

そして、パラメータに access_token やユーザーデータの取得範囲(scope)を含めてリクエストすると、JSON データが返ってきますので、これを用いてユーザーデータを処理します。

「appiary_1_O_1.js」でのユーザー情報取得

「appiary_1_O_1.js」では、ユーザー情報取得用のURLは、Appiary オブジェクトの「profile_url」プロパティに格納しています。ユーザー情報を取得する際には、getUser()メソッドを実行します。

Appiary.prototype.getUser = function(settings){
 if(this.user_token&&settings){
    settings.data              = settings.data||{};
    settings.data.access_token = this.user_token;
    Appiary.x(this.profile_url,settings);
 }
}

上記のコード中「Appiary.x()」とあるのは、XMLHttpRequest です。引数の「settings」の1つとして「onload」にコールバック関数を指定して、取得したユーザーデータを処理します。

「appiary_1_O_1.js」を用いたユーザーデータの処理

お試しアピアリーズ・ユーザー投稿掲示板」では、Appiary オブジェクト生成時に、まずスコープとして"nickname"を指定しています。そして、コールバック関数で取得したニックネームをページに表示します。

appiary = new Appiary(
 '_sandbox',
 '[アプリID]',
 '[アプリトークン]',
 '[クライアントID]',
 'nickname'
);

login = document.querySelector('#login');

appiary.show_nickname=function(e){
  if(typeof e.target.responseText=='string'){
     var res = JSON.parse(e.target.responseText);
     login.innerHTML  = res.nickname;
  }
}

appiary.getUser({'onload':appiary.show_nickname});

取得したデータを「JSON.parse()」でJavaScriptオブジェクトに変換しているところがポイントですね。また、その引数が「e.target.responseText」となっているところは注意。「e.target」が元となる「XMLHttpRequest」オブジェクトです。

次回は、JSONデータの作成がappiaries(アピアリーズ)ユーザーに限定されている場合の処理について述べます。

関連ページ
関連リンク

2013/09/03 (Tue.) Comment(0) appiaries

2013
09
03

日本製BaaS:appiaries を使ってみる。その7

今回は、日本製のBaaS:appiaries(アピアリーズ)のユーザー情報の取得について述べます。ユーザー機能の使い方の第4弾です。

appiaries(アピアリーズ)の Profile API

appiaries(アピアリーズ)の Profile API では、次のURLにアクセスして、ユーザー情報を取得します。

https://api-profiles.appiaries.com/v1/[データストアID]/[アプリケーションid]

そして、パラメータに access_token やユーザーデータの取得範囲(scope)を含めてリクエストすると、JSON データが返ってきますので、これを用いてユーザーデータを処理します。

「appiary_1_O_1.js」でのユーザー情報取得

「appiary_1_O_1.js」では、ユーザー情報取得用のURLは、Appiary オブジェクトの「profile_url」プロパティに格納しています。ユーザー情報を取得する際には、getUser()メソッドを実行します。

Appiary.prototype.getUser = function(settings){
 if(this.user_token&&settings){
    settings.data              = settings.data||{};
    settings.data.access_token = this.user_token;
    Appiary.x(this.profile_url,settings);
 }
}

上記のコード中「Appiary.x()」とあるのは、XMLHttpRequest です。引数の「settings」の1つとして「onload」にコールバック関数を指定して、取得したユーザーデータを処理します。

「appiary_1_O_1.js」を用いたユーザーデータの処理

お試しアピアリーズ・ユーザー投稿掲示板」では、Appiary オブジェクト生成時に、まずスコープとして"nickname"を指定しています。そして、コールバック関数で取得したニックネームをページに表示します。

appiary = new Appiary(
 '_sandbox',
 '[アプリID]',
 '[アプリトークン]',
 '[クライアントID]',
 'nickname'
);

login = document.querySelector('#login');

appiary.show_nickname=function(e){
  if(typeof e.target.responseText=='string'){
     var res = JSON.parse(e.target.responseText);
     login.innerHTML  = res.nickname;
  }
}

appiary.getUser({'onload':appiary.show_nickname});

取得したデータを「JSON.parse()」でJavaScriptオブジェクトに変換しているところがポイントですね。また、その引数が「e.target.responseText」となっているところは注意。「e.target」が元となる「XMLHttpRequest」オブジェクトです。

次回は、JSONデータの作成がappiaries(アピアリーズ)ユーザーに限定されている場合の処理について述べます。

関連ページ
関連リンク

2013/09/03 (Tue.) Comment(0) appiaries

2013
09
02

日本製BaaS:appiaries を使ってみる。その6

今回は、日本製のBaaS:appiaries(アピアリーズ)のユーザー機能の使い方の第3弾です。

日本製BaaS:appiaries を使ってみる。その4」では、次の5点をappiaries(アピアリーズ)のユーザー機能の要点としました。

  • コールバックURLを設定する。
  • JSONオブジェクトの作成権限を"SIGN IN"とする。
  • ページに認証ページへのリンクを設定する。
  • 認証後の処理を記述する。
  • 投稿ボタンを押したときの処理を記述する。

今回は、4番目「認証後の処理を記述する。」の項目についてです。

コールバックURLに付加されるパラメータ

appiaries(アピアリーズ)では、ユーザー認証後に指定したコールバックURLにリダイレクトする際、認証ユーザーの権限に関する情報をクエリストリングとして付加します。アプリケーション側は、これらのパラメータを用いて appiaries(アピアリーズ)内に作成したコレクション(ファイル・JSONデータ)にアクセスさせます。

Authorization Grantで認可コードを取得する場合は「code」がクエリストリングに含まれ、Implicit Grantでアクセストークンを取得する場合は次のパラメータが得られます。

  • access_token
  • store_token

access_token は、ユーザーに関する情報を取得するときに使用し、store_token は、JSONデータやファイルのコレクションにアクセスするときに使用します。

「appiary_1_O_1.js」でのトークンの処理

「appiary_1_O_1.js」では、クエリストリングを見て、次のように「access_token」と「store_token」を取得します。

if(location.hash) {
 if(location.hash.match(/[#&\?]access_token=([a-zA-Z0-9]+)/)){
  access_token = RegExp.$1;
 }
 if(location.hash.match(/[#&\?]store_token=([a-zA-Z0-9]+)/)){
  store_token = RegExp.$1;
 }
}

そして、それぞれ Appiary オブジェクトの「user_token」、「store_token」プロパティに値を格納します。

 this.user_token  = access_token;
 this.store_token = store_token;

Appiary オブジェクトに格納した値は、ユーザー情報やJSONデータの取得や作成の際に使用します。

次回はユーザー情報の取得について、その次はJSONデータの取得について述べます。

関連ページ
関連リンク

2013/09/02 (Mon.) Comment(0) appiaries

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」などを指定できます。

参照:「appiariesユーザー属性と認可スコープ

client_id

「アプリ詳細」>「OAuth情報」の欄に表示されているアプリ固有の「クライアントID」です。

redirect_uri

「アプリ詳細」>「OAuth情報」の欄に追加した「リダイレクトURL」です。認証後、このパラメータで指定したURLにリダイレクトされます。

その他のパラメータ

コールバックURIに引き継ぐデータは「state」パラメータを使います。

OAuthによるサインイン処理

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」です。

関連ページ
関連リンク

2013/08/31 (Sat.) Comment(0) appiaries

Links

ご注意

当サイトのスクリプトは、ブラウザが FireFox 3.0 であることを前提に作成されています。IE などでは正常に動作しないものがあります。

カテゴリー

ブログ内検索

最新記事

カレンダー

06 2018/07 08
S M T W T F S
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31

アーカイブ

RSS

最新CM

[04/15 jTemplate]
[05/22 寝太郎]

プロフィール

HN:
寝太郎
性別:
非公開

バーコード

P R

アクセス解析

リンク

NSM

コガネモチ

フリーエリア