[MT Plugin]QQ互聯插件-用QQ賬号登陸您的MT

QQ互聯插件-用QQ賬号登陸您的MT

( QQ Connect Commenters Plugin for Movable Type )

Authors: 路楊 (EasunLee) Copyright 2015 . License: Artistic, licensed under the same terms as Perl itself

qq_login.png

概述

MT QQ互聯插件 (QQ Connect Commenters plugin for Movable Type) 允許用戶用 QQ 号碼登陸你的 Movable Type 博客。
本插件嚴格使用 QQ互聯 的 Open API 編寫。安全可靠。 它可以給您的博客帶來良好的用戶體驗。 一旦使用這個插件,評論者可以自動獲取QQ昵稱、頭像等資源。

請注意: QQ互聯 (QQ Connect)官方使用的機制是審核制度,并不是使用這個插件就直接可以使用QQ登陸。 您需要去 QQ互聯 (QQ Connect) 官方注冊您使用本插件的網站并獲取屬于自己的 APPID 并提交審核。審核過程可能需要1周或者更長時間。

關于 QQ互聯 (QQ Connect) 的注冊,請 百度 之。或者讀取官方資料: http://wiki.connect.qq.com/

運行環境

  • Movable Type 4.2 或者更高版本
  • JSON::XS 2.0 或者更高版本
  • jQuery (非必需,建議)

Movable Type 的 extlib 中已經包含了必需的 JSON:XS 版本。

安裝

  1. 下載并解壓本插件。

  2. 複制(上傳) QQCommenters/mt-static 下的内容到 /path/to/mt/mt-static/

  3. 複制(上傳) QQCommenters/plugins 下的内容到 /path/to/mt/plugins/

  4. 登陸您的 Movable Type 後台 -> Plugin Settings 去設置您的 QQ APP IDAPP KEY

  5. 在 後台->Registration Settings -> Authentication Methods 中選啟用 QQ 。
  6. 在前台選擇登陸,您會看見 QQ 登陸 的選項已經有了。 如果您的網站通過審核,可以之直接使用了。

關于 QQ互聯 功能的申請

關于 QQ互聯 功能的申請,簡單減少一下流程:

  1. 用您的QQ賬号登陸 http://connect.qq.com/intro/login 并申請網站接入。
  2. 詳細描述您要接入的網站信息。請注意 回調地址 一定要填寫為*您的Movable Type 後台 CommentScript 的完整地址,并且帶上 http:// 或者 https:// 的前綴*。比如 (http://your_domain/cgi-bin/mt/mt-comments.cgi)。
    可以設置多個回調地址,用 分号 分開即可。 QQ互聯 (QQ Connect) 的官方APP幫助文檔 寫的像漿糊一樣,而且處處錯誤。這個地方官方文檔寫就是有問題。
  3. 騰訊 的QQ 登陸審核一個要求,就是登陸頁面要設置 醒目的QQ登錄入口。而我們的前端如果不做修改的話,會很簡潔,這個就需要自己在前台放端代碼。 簡單的分享一下我的一些前端 JS 代碼:

前端代碼

function QQSignIn()

codefunction QQSignIn() {
var doc_url = document.URL;
doc_url = doc_url.replace(/#.+/, '');
var url = '<$mt:CGIPath$><$mt:CommentScript$>?__mode=login_external&key=QQ&blog_id=<$mt:BlogID$>';
if (is_preview) {
if ( document['comments_form'] ) {
var entry_id = document['comments_form'].entry_id.value;
url += '&entry_id=' + entry_id;
} else {url += '&static=<$mt:BlogURL encode_url="1"$>'; }
} else {url += '&static=' + encodeURIComponent(doc_url);
}
mtClearUser();
location.href = url;
}

function QQSignInOnClick()

codefunction QQSignInOnClick(sign_in_element) {
var el;
if (sign_in_element) { el = document.getElementById(sign_in_element);}
if (el) el.innerHTML = 'Signing in... <span class="status-indicator">&nbsp;</span>';
mtClearUser(); // clear any 'anonymous' user cookie to allow sign in
QQSignIn();
return false;
}

這樣話,隻用使用 <span class="QQ_signin_span" title="Sign in with your QQ Account" onclick="return QQSignInOnClick('signin-widget-content')"></span> 即可展示出 QQ 登陸按鈕。
當然,這樣需要添加 CSS:

code.QQ_signin_span {
  background-image: url("../../mt-static/plugins/QQCommenters/Connect_logo_3.png");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  overflow: hidden;
  width: 120px;
  display: inline-block;
  height: 24px;
  padding: 0px;
  margin: 0px 2px;
  vertical-align: bottom;
  cursor: pointer;
}

On Github