native react 集成微信登录_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 登录通用组件就可以完美地使用了。
使用中有任何问题欢迎留言交流、讨论。
native react 集成微信登录_React Native 接入微博、微信、QQ 登录功能相关推荐
- native react 图片多选_React Native中加载图片的各种姿势
初使用Image,由于在React Native中图片资源来源丰富,刚开始我也是一脸懵逼,在几番尝试以后,终于了然 加载项目目录图片 在项目目录中新建一个Directory,命名img,拷贝一张名为' ...
- python实现qq登录_在django中实现QQ登录
在服务器端做qq登录的流程: 1.放置QQ登录按钮,这个去QQ的网站上下,把这个按钮的连接指向 https://graph.qq.com/oauth2.0/authorize?response_typ ...
- java集成网站微信,微博,qq登录
微信 WechatConfig.java package com.meeno.chemical.common.sdk.wechat.config;import org.springframework. ...
- Spring Security使用(三) 安全框架内使用QQ登录以及不加安全框架使用QQ登录
本文章的代码在第二篇(Spring Security使用(二) 异步登录 | 代码日志 (fanxing.live))的代码上继续完成 腾讯互联 申请地址:QQ互联官网首页 接入教程:网站应用接入概述 ...
- QQ登录的那些坑(如何开发qq登陆功能)
这几天在项目上面实现qq登录的功能,当功能做好后发现,同一个qq号登录之后腾讯返回的openid并不一样....(天啦噜啊~)然后查询文档以及咨询客服才知道注册申请时是有一个固定的套路的(不得不说,如 ...
- java qq登录界面_用java实现QQ登录界面怎么写
展开全部 用32313133353236313431303231363533e78988e69d8331333365646263java做QQ登录界面的写法如下: package ch10; impo ...
- java仿qq登录 界面设计,Java Swing仿QQ登录界面效果
本文实例为大家分享了Java Swing仿QQ登录界面展示的具体代码,供大家参考,具体内容如下 闲来无事将早些时候已实现的QQ登录界面再实现了一遍,纯手工打造(意思是没有用NetBeans.MyEcl ...
- php模拟QQ登录获得skey码,php模拟qq登录代码
php模拟qq登录代码 本文讲述了php如何模拟qq登录,原理是用curl模拟发送post登录,cookie保存本地,这里代码理论可以支持永久单挂qq,下面就让我们来看看吧.<?php $qqn ...
- java qq登录成功界面_java实现简单QQ登录界面
本文实例为大家分享了java实现简单QQ登录界面的具体代码,供大家参考,具体内容如下 java在图形界面,不是太强项,但不是不可以做,它的开源是very nice! 实现代码如下(想实现完美的界面,可 ...
最新文章
- mongodb使用常用语法,持续更新
- 电脑测速软件_康佳电视免费看直播,如何安装第三方软件?2个方法值得收藏...
- php中使用Curl、socket、file_get_contents三种方法POST提交数据
- SCSS 文件里的感叹号用法 - 给变量设置默认值
- [css] css的user-select:all 有什么用处?
- java 不允许默认构造_java – 如何使用ObjectMapper去除/序列化不可变对象而不使用默认构造函数?...
- 别停特斯拉旁边!特斯拉车辆自燃全车烧毁 连旁边的奥迪都没放过...
- 微服务之间的调用方式RestTemplate和FeignClient
- [转]OpenGL基础技术讲座--发展历史
- 【2021杭电多校赛】2021“MINIEYE杯”中国大学生算法设计超级联赛(2)签到题5题
- Unity3D笔记 愤怒的小鸟四 实现Selelction界面
- ASP.NET Ajax 实现无刷新分页
- 一文详解:java认证考试报名费用
- 云服务器obs_从零搭建流媒体服务器+obs推流直播
- k8s pod 污点
- U盘被写保护?我来教你高级格式化
- CAD软件中怎么合并表格?CAD表格合并技巧
- matlab 画柱状图和误差棒,小白1分钟绘图:带误差棒的柱状图
- 百度云盘上传有大小限制 微信文件上传有大小限制 怎么破?
- 【微分方程】微分算子法求微分方程特解