ライトアプリケーション開発ガイド


#はじめに

ライト アプリケーションとは何ですか?

ライト アプリケーションは、Weibo にアクセスするためのサードパーティ サービス (H5 ページ) 用に Weibo が提供する、基本的なフレームワークとアクセス サービス (Focus On Mobile) のセットです。

ライト アプリケーションの入り口は、Weibo ページ (プロフィール ページ、個人ホームページとも呼ばれます) または Weibo カードにあり、アクセス パーティによって Web アプリケーションの形式で開発されます。

ライト アプリケーションは、表示プラットフォームに応じて、デスクトップ ブラウザ上の iframe を介して埋め込まれる (以下、
Web バージョン ) と、Weibo の Webview を介して表示される 2 つのタイプに分けられます。クライアント（以降、H5 バージョン と呼びます）。アプリは 2 つの表示プラットフォームのいずれかを選択することも、両方をサポートすることもできます。

特長

ライトアプリケーションは、Weiboプラットフォームの特性に合わせてユーザーに近いチャネルをより多く提供し、ユーザーとユーザー間の双方向の関係の形成を促進します。販売者に提供し、ユーザーがより効果的にサービスを見つけて使用できるようにします。


    •
  • 便利なアクセス。アクセスする H5 Web ページは、Weibo との互換性作業を少しだけ行う必要があり、公式クライアントが提供する 1 システムのライト アプリケーション サービスを享受できるため、ユーザーに優れたエクスペリエンスを提供できます
    • # 許可は必要ありません
  • 。ユーザーがログイン中にアプリケーションにアクセスすると、新しいフレームワークはデフォルトで認証を完了し、access_token 情報をアクセス側に渡します。 •
    • 露出の機会が増える
  • 。アプリケーションが起動されると、ページ ページと Weibo フィード ストリームのカードに表示されます。 Weibo での表示を改善するために、リンクカード アクセスをサポートします。 • 開発プロセス中に、
    • アクセス方法とパラメータを統一しました
  • 。 Web版でもH5版でもクライアントが受け取るパラメータは同じであり、アクセス方法も基本的に同じです。アプリケーションはブラウザの userAgent を通じて Web 版か H5 版かを区別できます。 •
    • Weibo 決済へのアクセスをサポート
  • し、ワンクリックで商品の支払いを完了します。 •[Web バージョン]
    • 新しいアプリケーションの共有と「いいね!」
  • 。アプリケーションを Weibo に直接共有し、カード表示を生成して迅速に広めます。 •[Web バージョン]
    • アプリケーションへの非ログイン アクセスをサポートします
  • 。 Weibo にログインせずにアプリケーションを参照することもできます。必要に応じて、JS クライアントを通じてログイン オーバーレイを呼び出します。 •[Web バージョン]
    • アプリの幅が 940 px
  • にサイズ変更されました。元の 760px はサポートされず、元の 950px は 940px に変更されます。
ライト アプリケーション シナリオ

ライト アプリケーションの中には、映画や書籍などの内側のページが目立つものもあります。これらを直接表示することもできます。 Weibo ストリーム内 カードが表示されたら、カードをクリックして製品詳細ページに直接移動し、直接購入します。再生できます。

またはその両方、両方でも可能です。

アプリケーション例

オンライン 4S ストア (Web バージョンと H5 バージョンの両方にアクセス可能):

pageapp4s221.png
pageapp4smobile221.png

##H5 バージョン:

Ubao、Aiyingke


その他の軽量アプリケーション はじめに、ここをクリックしてください。

ライト アプリケーションの開発プロセス

ライト アプリケーションの開発は、大きく 4 つのステップに分かれています。

    • Weibo 開発者になる
  • • アプリケーションの作成
  • ##• アプリケーション開発
    • ##• アプリケーションのレビューと起動
  • 次の図に示すように:


workflow.pngWeibo 開発者になる

ライト アプリケーション開発の最初のステップは、Weibo 企業の開発者になることです。

まだ Weibo 開発者ではない場合は、まず Weibo オープン プラットフォームにログインし、次に管理センターに入り、開発者の基本情報と ID 認証を完了してください。

基本情報セクションで、開発者の種類として会社を直接選択し、フォームに記入します。入力が完了したら、電子メール認証を通じてアプリケーションの作成を開始できます。


baseinfo.png# 本人認証を行うと、申請の審査や各種許可の申請が容易になりますので、慎重に記入してください。


id-verify.png個人開発者が企業開発者にアップグレードされました

すでに個人開発者である場合は、開発者情報の編集ページに入る必要があります開発者の種類として会社を再選択し、情報を保存します。

アプリケーションの作成

ページ ライト アプリケーションの紹介ページで、[アプリケーションの作成] ボタンをクリックして、作成フォーム入力ページに入ります。



フォームへの入力が完了すると、自動的にアプリケーション コンソールに移動し、アプリケーションの基本情報をさらに改善できます。

アプリケーション情報の編集

アプリケーション情報→基本情報を開くと、アプリケーションの基本データが表示されます。変更を加えるには、「編集」をクリックします。

テストアドレス(Web版、H5版)

アプリケーション情報→テスト情報を開くと、アプリケーションのテストアドレスが確認できます。アプリケーションはまだレビューに合格しておらず、App Plaza に公開されていないため、このアドレスには開発者本人のみがアクセスできます。

他の Weibo ユーザーに閲覧してもらう必要がある場合は、Weibo ユーザーをテスト アカウントに追加できます。アプリ テスト アカウントごとに最大 15 人を追加できます。


test-address.png

アプリケーションがコピーライティング レビューに合格し、スクエアで起動されると、テスト アカウントは自動的に期限切れになります。


ライト アプリケーションへのアップグレード

アップグレードとは主に、正常に作成された元のエンタープライズ アプリケーション、サイト アプリケーション、または個人用バージョンを指します。ページ アプリケーション、ライト アプリケーションにアップグレードされました。

アプリケーションのアプリキーが作成されているため、アップグレードには主に 2 つの側面が含まれます: まず、Weibo オープン プラットフォームのバックグラウンドがアプリキーをライト アプリケーション タイプにアップグレードします。第 2 に、アプリケーションは最初に受け取った古いパラメータを変更します。新しいパラメータに。

アプリケーション開発

注: このセクションにはアプリケーション開発の詳細がすべて含まれています。アプリケーションの実際の状況に応じて選択してください。

  • • 内部ページの表示のみが必要なアプリケーションの場合は、Weibo 支払いセクションに直接アクセスする方法を参照してください;
  • • ホーム ページの表示のみが必要なアプリケーションの場合は、受信フレームパラメータセクションを読んでください;
  • • いずれにしても、最後まで読んでください。


アプリケーションを作成したら、アプリケーション開発プロセスに入る必要があります。アプリケーション開発は実際には複雑ではありません。Weibo フレームワークによって渡されたパラメーターを処理し、対応する処理を実行する方法だけです。これにはいくつかの問題が含まれます:


アプリケーションホームページの開発:

  • フレームパラメータの受信
  • Web版とH5版の違い
  • Web版JavaScriptパッケージの利用
  • H5 バージョンで Weibo クライアントの JS API を呼び出す方法

内部アプリケーション ページの開発:

  • Weibo 決済へのアクセス方法
  • リンクカードにアクセスする方法

アプリケーションをライト アプリケーションにアップグレードする

  • エンタープライズ アプリケーション移行ガイド


  • Weibo クライアント QR コード ルール

技術プロセス

フレーム パラメーターの受信

アプリケーション フレームワークは、暗号化されたパラメーター signed_request を POST 経由でアクセス側のページに送信します。 パラメータには uid、access_token などの情報が含まれており、アプリケーションで使用する必要がある場合は、使用する前に復号化する必要があります。

純粋に表示するアプリケーションの場合は、このパラメータを無視できます。

注意が必要なのは、パラメータsigned_requestはPOSTモードで送信されるため、アクセスする側のページがPOST受信に対応していない場合、が正しく表示されない可能性があります。


signed_requestの暗号化方式

signed_requestは小数点で2つに分かれており、小数点の前が check data 、小数点の後ろは real data です。 検証データは、データが改ざんされていないなど、データの正当性を保証するために使用され、検証に成功した本物のデータのみが信頼できます。

これらは両方とも Base64 エンコードを使用するため、最初にデータを復元する必要があります。 Base64 データの一部の文字は、HTTP 送信時に URL 内の他の文字と混同される可能性があるため、開発者が取得した Base64 文字列は特別に処理されています。したがって、base64 デコードする前に、文字列を標準の Base64 文字に復元する必要があります。 


还原方式：先根据字符串长度补上相应长度的等号（补上等号后的字符串长度应该是 4 的整数倍），然后将其中所有的 - 替换成 +，所有 _ 替换成 /。


実際のデータはbase64でデコードされた後、開発者が必要とする情報であるJSONオブジェクトに変換されます。詳細は以下をご覧ください。


検証データを使用するにはどうすればよいですか?

まず、実際のデータベース 64 でデコードされた JSON のアルゴリズムを確認します。これは HMAC-SHA256 である必要があります。

2 検証データによる検証 検証方法は以下の通りです:

  • 検証データをbase64デコード後(文字化けする可能性がありますが気にしないでください) )、後で比較できるように変数に保存します。
  • Base64 デコード前のデータについては、アプリケーションのアプリ シークレットを使用して sha256 暗号化を行います。データの正当性を確保するには、暗号化されたデータと Base64 デコード後の検証データが一致している必要があります。

したがって、signed_request の復号メソッドはすでに記述できます。


データ復号化に SDK を使用する

Weibo オープン プラットフォーム上の多数の SDK の中で、PHPSDK と JavaSDK には、signed_request デコード関数が組み込まれており、使用できます。直接。他の言語は開発者自身が完成させる必要があります。

#PHPSDK を使用して signed_request からパラメータを抽出する

if(!empty($_POST["signed_request"])){
	$o = new SaeTOAuth( WB_AKEY , WB_SKEY  );
	$data = $o->parseSignedRequest($_REQUEST["signed_request"]);
	if($data == '-2'){
		 die('sign is error!');
	} else {
		$_SESSION['oauth2'] = $data;
	}
}

PHPSDK で signed_request を復号化する方法は次のとおりです。他の言語での参照のために

/**
 * 解析 signed_request
 * @param string $signed_request 应用框架在加载iframe时会通过向Canvas URL post的参数signed_request
 * @return array
 */
function parseSignedRequest($signed_request) {

	// 将 $signed_request 参数，用小数点.分隔成数组，下标0的赋值给 $encoded_sig，下标1的复制给 $payload
	list($encoded_sig, $payload) = explode('.', $signed_request, 2);

	// 对 $encoded_sig 进行 base64 解码，然后赋值给 $sig
	$sig = self::base64decode($encoded_sig);

	// 对 $payload 进行 base64 解码，并将字符串转为 JSON 赋值给 $data
	$data = json_decode(self::base64decode($payload), true);

	// 如果 $data 中的 algorithm 不是 HMAC-SHA256，表示数据校验出错，直接返回 -1
	if (strtoupper($data['algorithm']) !== 'HMAC-SHA256') return '-1';

	// 使用 app secret 对 $payload 进行 sha256 加密
	$expected_sig = hash_hmac('sha256', $payload, $this->client_secret, true);

	// 如果 sha256 加密后的结果和 $sig 是一致的，那么 $data 数据就没问题，直接返回给调用方；否则>表示数据校验出错，返回 -2
	return ($sig !== $expected_sig)? '-2' : $data;
}
/**
* @ignore
*/
function base64decode($str) {
	// 将需要 base64 解码的字符串，按照字符串长度先补上相应的等号（补上等号后的字符串长度应该是4>的整数倍），然后将其中的 - 和 _ 分别替换成 + 和 /，然后对处理后的字符串执行 base64 解码
	return base64_decode(strtr($str.str_repeat('=', (4 - strlen($str) % 4)), '-_', '+/'));
}


signed_request 復号化された形式

ログに記録されていない状態アクセス アプリケーション パラメーター

QQ截图20170209174302.png

8 月 1 日以降に作成されたライト アプリケーション管理アドレスは、次のアプリケーション アドレスをロードします。デフォルトでは appkey ですが、サードパーティがアドレスを管理する必要がある場合は、origin によって返されたフィールドに基づいて 2 回目のジャンプを行ってください。

アプリケーションにアクセスするためのログイン ステータス、自動認証成功パラメータ

QQ截图20170209174315.png

パラメータを正しく受信できた後も、アプリケーションは現在のプラットフォームを区別する必要があります。

Web 版と H5 版の違い

アプリケーションの基本情報で、Web 版と H5 版のどちらか、または両方の互換性を選択できます。 。両方に互換性がある場合は、Web 版と H5 版を区別する必要があります。

この区別には 2 つの機能があります: 1 つは、アプリケーションが最適な表示効果を達成するためにさまざまなデバイスに適応できるようにすることです。もう 1 つは、Web バージョンと H5 バージョンで呼び出される Javascript パッケージが異なることです。差別化により不要なJSコードを削減できます。

アプリケーションは現在、ブラウザの userAgent によって区別できます。Web ブラウザに表示されるか Weibo クライアントに表示されるかが、現在のところ唯一の方法です。


Web 版 JavaScript パッケージの使用法

Web 版では、iframe を介してアクセスするアプリケーションが埋め込まれており、フレーム POST のパラメータを受け取るだけでなく、 iframe などのフレーム。適応性が高く、親ページから情報を取得し、ログイン フローティング レイヤーを呼び出すなど。

これらは、フレームワークが提供する JavaScript ファイルを通じて提供されます。具体的な使用方法については、ライト アプリケーション コンポーネントの Web バージョン コンポーネントの呼び出しをお読みください。


H5 バージョンで Weibo クライアントの JS API を呼び出す方法

Weibo クライアントは 4.3.0 A から Webview になりました新しい JS API 関数が追加され、Web アプリケーションが JS API を通じていくつかのシステム関数 (ネットワーク ステータスの取得、位置情報の取得、QR コードのスキャン、大きな画像の表示など) を呼び出すことが容易になりました。

詳しい使い方については、ライトアプリコンポーネントのH5版コンポーネントの使い方をご覧ください。


Weibo 決済の呼び出し方法

現在、Weibo 決済はオフライン アクセスのみをサポートしています。アクセスが必要な開発者は、wangwei16@staff までご連絡ください。 .weibo.com。

Weibo にアクセスして支払いを行った後、製品リンクカードへのアクセスを申請できます。

リンクカード分析にアクセスする方法

注: 現在、商品リンクカードにアクセスするには、まず Weibo 決済にアクセスする必要があります。申請するには、wangwei16@staff.weibo.com までご連絡ください。 Weibo経由で支払います。


リンクカードとは

Weibo にリンクが含まれている場合、図に示すように短いリンクとして表示されます:

link.png


リンクがオブジェクト データを含む特別な短いリンクに解析される場合、オブジェクト データは Weibo メッセージ フローにカードとして表示できます。このフォームはWeiboです メッセージ フローのリンクカードの解析。

解析されたリンクは miniCard に置き換えられ、よりリッチで強力な表示が行われ、クリックスルー率が高くなります。通常、Weibo テキストの下にあるリンクカードが解析され、サムネイル、タイトル、紹介文、その他の情報が表示されます。分析効果は次のとおりです:

card.png

Linkcard は、Weibo で特定の機能を実行するためにパーティー Web サイトのリンクにアクセスするために必要なフォームです。Linkcard を利用すると、ビデオ リンクの直接再生、オーディオ リンクの直接リスニング、軽量アプリケーションの直接読み込みなどの効果を実現できます。


ユーザーが Weibo でアクセス パーティの Web サイトへのリンクを共有すると、リンクの特性を使用して、リンクが特定のライト アプリケーション アクセス パーティに属しているかどうかを識別します。ライトアプリケーションアクセスパーティのリンクでは、アクセスパーティによって登録された解析コールバックインターフェイスを呼び出し、事前に合意された形式でオブジェクトデータを取得します。オブジェクト データを正常に取得できるこれらのリンクは、PC およびモバイル クライアント上でリンクカードとして表示でき、ユーザーがクリックすると軽量アプリケーション フレームワークをロードできます。


利点: アクセス側は、標準化されたプロセスに従ってコールバック インターフェイスを開発するだけで、迅速なアクセスを実現できます。

欠点: アクセス パーティはパッシブ アクセスであり、コールバック インターフェイスには失敗率があり、これにより個々のリンクのリンクカード解決が失敗する可能性があります。


リンクカードにアクセスするにはどうすればよいですか?

オフラインで申請を提出するには、wangwei16@staff.weibo.com までご連絡ください。


#リンクカードにアクセスするためにアクセス側が行う必要があること

最初にリンクカードの作業プロセスを見てみましょう:

linkcard-workflow.png


図の 1 と 2 の詳細な説明は次のとおりです:

1. アクセス パーティは、長い URL 一致ルールの解析を提供します

長い URL 一致ルールは、単純な正規表現の場合、一致した長い URL は、短いリンクに転送するときにアクセス側のオブジェクト データ コールバック インターフェイスを呼び出すためのパラメータとして使用されます。つまり、図のリンク ドメイン名とその他の特性です。

たとえば、製品をリンクカードとして解析する場合、製品の長いリンク URL は http://www.productmall.com/sample/256819 であるため、長い URL 一致ルールは次のようになります。 www.productmall.com/sample/ になります。 (http:// は含まれておらず、可変製品番号も含まれていないことに注意してください)

2. アクセス パーティは、オブジェクト データを解析するためのコールバック インターフェイスを提供します

このインターフェイスは、によって提供されます。 Fang Lai が開発するアクセス。 Weibo プラットフォームが上記の長い URL マッチング ルールを通過すると、一致する長い URL は短いリンクに転送するときにアクセス パーティのこのインターフェイスを呼び出します。パラメータは一致する長い URL です。

アクセス パーティがパラメータ URL がリンクカードとして解析する必要がある正しいページであると判断すると、インターフェイスは解析する必要があるオブジェクト データを返します。理論的には、パラメータ URL が異なれば、異なるオブジェクト データが返されます。 。それ以外の場合、インターフェイスがエラーを返した場合、Weibo プラットフォームはリンクが通常のリンクカード オブジェクトではないとみなし、リンクカード分析を実行せずに通常の短いリンクに変換します。


#オブジェクト データ インターフェイス

インターフェイス リクエスト メソッド: GET インターフェイスパラメータ: url、一致ルールを満たす長いURL インターフェイスの戻り値: JSON. JSON データの特定の属性フィールドを次の表に示します:

QQ截图20170209174337.png

上記の属性のうち、タイプはオブジェクト、オブジェクト配列、およびメディアです。下位レベルの属性については、具体的な説明は次のとおりです。

image（メディア リンク）

QQ截图20170209174349.png

tags（オブジェクト配列）

QQ截图20170209174400.png

例:

アクセス パーティによって提供される長い URL 一致ルール: www.productmall.com/sample/

サンプル リンク: http://www.productmall.com /sample/256819

アクセス パーティによって提供されるオブジェクト データ コールバック インターフェイス: http://www.productmall.com/api/get_data?url=

この場合、呼び出し側のインスタンスは次のようになります。 http://www.productmall.com/api/get_data?url=http://www.productmall.com/sample/256819

アクセス パーティによって返されるデータは次のとおりです:

(1) 公式クライアント QR コード リコール機能にアクセスしない 

{ 
	"display_name": "这是商品的标题", 
	"image": { 
		"url": "http://www.productmall.com/7272.jpg", 
		"width": 120, 
		"height": 120 
	}, 
	"summary": "这是商品的简介", 
	"url": "http://www.productmall.com/sample/256819.html", 
	"tags": [ 
		{ 
			"display_name": "标签1" 
		} 
	], 
	"create_at": "2012-10-18", 
	"object_type": "product" 
}

(2) 公式クライアント QR コード リコール機能にアクセスする (アクセス当事者が申請した場合、オープン プラットフォームはドメイン名をアクセスパーティー ID は 1456439003)

{ 
	"display_name": "这是商品的标题", 
	"id": "1456439003:www_productmall_com_sample_256819", 
	"image": { 
		"url": "http://www.productmall.com/7272.jpg", 
		"width": 120, 
		"height": 120 
	}, 
	"summary": "这是商品的简介", 
	"url": "http://www.productmall.com/sample/256819.html", 
	"tags": [ 
		{ 
			"display_name": "标签1" 
		} 
	], 
	"create_at": "2012-10-18", 
	"object_type": "product"
}

エンタープライズ アプリケーション移行ガイド (ライト アプリケーションへのアップグレード)

エンタープライズ アプリケーションとライト アプリケーション間の最も直感的な変更点は、視覚効果に誇張された頭 (大きなアバター、ヘッダー画像、タブなど）、コンテンツの表示に重点を置いています。


エンタープライズ アプリケーションを軽量アプリケーションにアップグレードするには、次の 2 つのことを行う必要があります:

1. アプリケーションの appkey をアップグレードします。 appkey を移行リストに追加するには、カスタマー サービスのメールアドレスにご連絡ください: weibo_app@vip.sina.com

2. アプリケーション パラメーターを変更します。


  • パラメータはPOST送信に変更され暗号化されていますが、復号化方法は受信フレームパラメータの項を参照してください。
  • エンタープライズ アプリケーションがライト アプリケーションにアップグレードされると、パラメーター名も変更されます。古いパラメータと新しいパラメータの対応関係は次のとおりです。

QQ截图20170209174414.png

##Weibo クライアント QR コード ルール

このルールによって生成された QR コード画像を使用し、Weibo クライアントでスキャンした後、内蔵のデフォルト ブラウザの代わりにオブジェクトのテキスト ページに直接入力できます。以下の違いを参照してください:


diff.png


##テスト アプリケーション ルール (四角形に入る前に使用):

アプリケーションのホームページによって生成された QR コード: http://apps.weibo.com/qrcode/test?uid=xxx&appkey=xxx (ここでの appkey アルゴリズムは、base62 以降の appkey です)
  • アプリケーションの内部ページにはテスト アドレスはありません。データベースに保存された後の正式なアドレスになります。
正式なアドレス ルール (アプリケーションの内部ページに移動した後に使用されます) square):


アプリケーションのホームページから生成された QR コード: http://apps.weibo.com/qrcode/app?uid=xxx&appkey=xxx (ここでの appkey アルゴリズムは、base62 以降の appkey です)
  • アプリケーションの内部ページによって生成された QR コード: http://apps.weibo.com/qrcode/linkcard?oid=xxx (ここでの oid は、オブジェクトがリンクカードに入力された後に生成される ID です)ライブラリ)
ライト アプリケーション H5 バージョン デモ

Weibo クライアントを使用して、以下の QR コードをスキャンしてデモを表示してください:

# ＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃


デモに関連するインターフェイスの詳細については、次のドキュメントを参照してください:


Light アプリケーション コンポーネントのドキュメント: http://open.weibo.com/wiki/Lightアプリケーション H5 新バージョン JS


Weibo 決済アプリケーション アクセス ガイド: http://open.weibo.com/wiki/Weibo 決済アプリケーション アクセス ガイド


Weibo API インターフェイス ドキュメント: http://open.weibo.com/wiki/Weibo API

アプリケーションのレビューと起動

アプリケーションの開発後、アプリケーションを提出する必要がありますレビュー。 Weibo オープン プラットフォームに入り、ログインしてアプリケーションを開くと、審査のために送信するための入り口が表示されます。

ライト アプリケーションは審査のためにプラザに送信する必要があります。審査後、Blue V の管理センターに移動します -> デバイス管理 -> アプリケーション管理 -> アプリケーションをさらに取得 -> アプリケーション プラザアプリケーションをインストールします。インストール後、apps.weibo.com/uid/xxx で始まるアドレスが生成されます。このアドレスを Weibo で宣伝するために使用してください。このアドレスのみが自動的に Weibo のカード形式に解析されます。

submit.png


ライト アプリケーションのレビュー仕様

サービスとサポート

ライトのアクセス プロセス中に遭遇アプリケーション ご質問がございましたら、wangwei16@staff.weibo.com

までご連絡ください。
←
→