React Native 接入微博、微信、QQ 登錄功能

在 App 開發中我們經常需要在用戶登錄模塊接入 SNS 登錄組件，這樣會大大提高用戶的注冊體驗。特別當一個不是剛性需求 App 推廣的時候，這樣會很大的降低用戶體驗的成本，沒有人愿意忍受輸入郵箱、手機號碼去注冊一個賬號的流程。

本文主要分享了在 React Native 中接入微博、微信、QQ 登錄的流程，以及此前登錄組件中修復的一個已知 bug 的修復。

項目中兩個地方需要設置key，分別為 Info.plist 和  AppDelegate.m 中。

需要注意的是，在  Info.plist 中，key 的前面是有前綴的，按照示例程序中的添加修改即可，一定要注意。

新浪微博需要特別注意，授權回調頁的 URL 需要和登錄組件中的 URL 完全一致，因為 App 不涉及到回調后的頁面，所以只要保證兩個 URL 一致并能訪問即可。

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;  }  );  }  }

*** 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 的格式要求。 ********結束********