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 登录通用组件就可以完美地使用了。
使用中有任何问题欢迎留言交流、讨论。
作者:Parry
出处:http://www.cnblogs.com/parry/
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
React Native 接入微博、微信、QQ 登录功能相关推荐
- React Native实现第三方分享、登录功能(Android,IOS双平台)
欢迎大家关注[跨平台开发那些事]公众号,定期推送跨平台开发技术实践. 源码已开源到Github,地址请点击:react-native-share [一行代码,双平台分享] 目前支持分享的平台有[QQ] ...
- 测试用例集-9.QQ登录功能测试用例
------·今天距2020年70天·------ 这是ITester软件测试小栈第64次推文 大家好 我是coco小锦鲤 对80.90后来说 QQ曾经维系了整个青春 QQ最开始的样子 要从1999年 ...
- JS_SDK实现网站应用QQ登录功能-QQ互联(小白易懂)
为了让应用更快接入,腾讯提供了JS SDK,PHP SDK v2.2. JS SDK是现有最简单的接入QQ互联的方式. JS SDK基于QQ互联OAuth2.0协议的client-side模式, 封装 ...
- android 仿微信demo————登录功能实现(移动端)
android 仿微信demo----微信启动界面实现 android 仿微信demo----注册功能实现(移动端) android 仿微信demo----注册功能实现(服务端) android 仿微 ...
- 网站集成QQ登录功能
原文:网站集成QQ登录功能 最近在做一个项目时,客户要求网站能够集成QQ登录的功能,以前没做过这方面的开发,于是去QQ的开放平台官网研究了一下相关资料,经过自己的艰苦探索,终于实现了集成QQ登录的功能 ...
- android 仿微信demo————登录功能实现(服务端)
android 仿微信demo----微信启动界面实现 android 仿微信demo----注册功能实现(移动端) android 仿微信demo----注册功能实现(服务端) android 仿微 ...
- H5 微信授权登录功能实现
背景 最近几周面试复习以前知识库,刚好博客从国外迁移到国内CSND,同步坐下笔记,梳理之前开发H5 微信授权登录功能获取用户信息数据. H5页面微信授权登录,使用微信官方JSSDK,微信网页授权较为复 ...
- 乐视网CEO梁军:现在就是缺钱 正在重新学习做生意 2017年09月20日01:18 新京报 37 微博 微信 QQ空间 添加喜爱 乐视网CEO梁军。 新京报记者 吴江 摄乐视网CEO梁军。 新京
乐视网CEO梁军:现在就是缺钱 正在重新学习做生意 2017年09月20日01:18 新京报 37微博微信QQ空间添加喜爱 乐视网CEO梁军. 新京报记者 吴江 摄 乐视网(15.330, 0.00, ...
- React native 接入百度AI活体检测、人脸识别 iOS版本
前期准备工作参考:React native 接入百度AI活体检测.人脸识别 Android版本 iOS配置 1.将FaceSDK里面的文件导入到iOS项目 添加完之后是这样的 2.选择链接C++标准库 ...
- QRCode 扫描二维码、扫描条形码、相册获取图片后识别、生成带 Logo 二维码、支持微博微信 QQ 二维码扫描样式...
QRCode 扫描二维码.扫描条形码.相册获取图片后识别.生成带 Logo 二维码.支持微博微信 QQ 二维码扫描样式 参考链接:https://github.com/bingoogolapple/B ...
最新文章
- 豪斯荷尔德变换及变形QR算法对矩阵进行奇异值分解VB算法
- 汇编语言-017(SCASW 、STRUCT 、STRUCT_ALLPOINTS 、STRUCT_ALIGN 、SYSTEMTIME、UNION 、 STRUCTTEST )
- 【CodeForces - 798A】Mike and palindrome (回文串,水题,字符串问题)
- 街舞中的rolling机器人_首家!爆点!奈雪の茶、蛙小侠..开业倒计时!街舞PK…这个六一就差你来围观了...
- Vuex使用详解,附加项目遇到的问题(简单明了)
- GL 与 CV 管线 (pipeline) 比较与相互转换
- 搜狗输入法电脑版_四款“真·无广告”的良心靠谱输入法推荐 2020
- 钉钉作弊,被判5年!
- 确认oracle是否繁忙,Oracle系统繁忙时,快速定位
- 平板电脑有哪些品牌_平板电脑充电柜使用要注意哪些?安和力
- strrstr php,php之字符串
- 怎样安装php5_如何安装php5.3
- [剑指Offer]-把数字翻译成字符串
- mysql交并补_集合交并补运算顺序是什么?
- 关于取地址运算符以及指针的问题
- 部分库不支持32位系统archive报错:Undefined symbols for architecture armv7
- 好书推荐,电子人的入门好书
- React前端面试题
- 数据结构:平衡二叉树(AVL树)、树的高度
- 打包aab_聚餐买单AA制已经过时了 AAB制、AABB制、BBK制,你选哪个?
热门文章
- [C语言 - 13] 运算符
- java生成仿银行卡的会员号
- 写一个微信和支付宝订单的查询方法:
- 获取对象属性名的方法 Object.keys() 与 Object.getOwnPropertyNames() 与 for循环
- iOS之某公司iOS开发笔试题
- Android studio 配置file encoding 无效,中文乱码解决办法
- _itoa_s替换 itoa
- 【玩转Ubuntu】02. Ubuntu上搭建Android开发环境
- 模块化分析设计(简单的注册登录模块)
- 给服务器端DropDownList控件添加客户端onchange事件