在 App 開發中我們經常需要在用戶登錄模塊接入 SNS 登錄組件，這樣會大大提高用戶的註冊體驗。特別當一個不是剛性需求 App 推廣的時候，這樣會很大的降低用戶體驗的成本，沒有人願意忍受輸入郵箱、手機號碼去註冊一個賬號的流程。 本文主要分享了在 React Native 中接入微博、微信、QQ ...
在 App 開發中我們經常需要在用戶登錄模塊接入 SNS 登錄組件，這樣會大大提高用戶的註冊體驗。特別當一個不是剛性需求 App 推廣的時候，這樣會很大的降低用戶體驗的成本，沒有人願意忍受輸入郵箱、手機號碼去註冊一個賬號的流程。
本文主要分享了在 React Native 中接入微博、微信、QQ 登錄的流程，以及此前登錄組件中修複的一個已知 bug 的修複。
我的源博客地址：http://blog.parryqiu.com/2016/01/27/react_native_sns_weibo_wechat_qq_login/
使用的登錄組件
這裡使用的組件是 react-native-open-share，此組件從 iOS 的 SNS 通用登錄組件 OpenShare fork 出來的，添加了到 React Native 的組件映射。源作者是 Jiayao Wu，後來我在使用的過程中發現了新浪微博登錄的一個 bug，下麵會說明此 bug 的原因。我 fork 出來後，修複了此 bug，修複後的項目在 react-native-open-share，等待源作者 merge 進 master 中去，目前需要使用的可以去我的項目地址中下載使用。
項目接入
項目前期具體接入的過程在項目頁面已經做了詳細的說明，如果在接入過程中遇到什麼問題歡迎留言討論。
這裡主要針對接入過程中可能需要註意的幾個點作一些說明。
關於新浪微博、微信、QQ 接入審核的註意點
- 三個平臺都需要進行項目提交審核，一般都是一到兩個工作日審核結束。
- 新浪微博、QQ 獲取登錄許可權是免費的，微信的登錄許可權（以及一些其他的高級功能）需要每年繳納300元人民幣的費用。
平臺對應的地址分別為：新浪微博，微信，QQ
關於項目中 key 以及認證 URL 的設置
項目中兩個地方需要設置key，分別為 Info.plist 和 AppDelegate.m 中。
需要註意的是，在 Info.plist 中，key 的前面是有首碼的，按照示常式序中的添加修改即可，一定要註意。
新浪微博需要特別註意，授權回調頁的 URL 需要和登錄組件中的 URL 完全一致，因為 App 不涉及到回調後的頁面，所以只要保證兩個 URL 一致並能訪問即可。
組件中的 URL 地址定義在文件 SocietyLoginManager.m 中的約 105 行處。
其他沒有特別需要註意的地方，按照項目接入說明接入即可。
React Native 中的使用
在 React Native 通過添加三個 SNS 的圖標，添加上對應的方法調用即可，代碼如下：
var openShare = require('react-native-open-share'); //頭部導入組件
_weiboLogin: function() {
var _this = this;
openShare.weiboLogin();
if (!_this.weiboLogin) {
_this.weiboLogin = DeviceEventEmitter.addListener(
'managerCallback', (response) => {
AlertIOS.alert(
'response',
JSON.stringify(response)
);
_this.weiboLogin.remove();
delete _this.weiboLogin;
}
);
}
},
_qqLogin: function() {
var _this = this;
openShare.qqLogin();
if (!_this.qqLogin) {
_this.qqLogin = DeviceEventEmitter.addListener(
'managerCallback', (response) => {
AlertIOS.alert(
'response',
JSON.stringify(response)
);
_this.qqLogin.remove();
delete _this.qqLogin;
}
);
}
},
_wechatLogin: function() {
var _this = this;
openShare.wechatLogin();
if (!_this.wechatLogin) {
_this.wechatLogin = DeviceEventEmitter.addListener(
'managerCallback', (response) => {
AlertIOS.alert(
'response',
JSON.stringify(response)
);
_this.wechatLogin.remove();
delete _this.wechatLogin;
}
);
}
}接入後就可以在 alert 中看到返回的 json 數據了。
之前組件中存在的一個 bug 處理
之前的組件，在微博返回數據的時候直接使用 NSDictionary 進行返回了，但是微博的 SDK 中返回日期類型的時候會導致 React Native 解析 json 的時候報錯，錯誤如下：
*** Terminating app due to uncaught exception 'NSInvalidArgumentException',
reason: 'Invalid type in JSON write (__NSDate)'
*** First throw call stack:
...主要的出錯代碼在文件 SocietyLoginManager.m 中的約 112 行處。
所以對返回的數據增加對應的日期格式化函數，並調用即可。
主要的處理函數，相關的調用去查看源代碼即可。
//處理 返回數據中的 expirationDate 值，因為值的格式有問題，轉換成 string 後才能符合 json 的格式要求。 ********開始********
//Commit by Parry at 2016-01-26
- (NSMutableDictionary*)change: (NSDictionary *)message {
NSMutableDictionary* data = [message mutableCopy];
if ([message objectForKey:@"expirationDate"]) {
NSDateFormatter *dateToStringFormatter = [[NSDateFormatter alloc] init];
[dateToStringFormatter setDateFormat:@"yyyy-MM-dd HH:mm:ss"];
NSDate *date= [data objectForKey:@"expirationDate"];
NSString *strDate = [dateToStringFormatter stringFromDate:date];
data = [message mutableCopy];
[data setObject:strDate forKey:@"expirationDate"];
}
return data;
}
//處理 返回數據中的expirationDate值，因為值的格式有問題，轉換成 string 後才能符合 json 的格式要求。 ********結束********這樣，這個 React Native 下的 SNS 登錄通用組件就可以完美地使用了。
使用中有任何問題歡迎留言交流、討論。
