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