在 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 登录通用组件就可以完美地使用了。
使用中有任何问题欢迎留言交流、讨论。
React Native 接入微博、微信、QQ 登录功能的更多相关文章
-
h5 网页版的微博微信QQ登录
一:微博 1,先说微博吧,首先你的去http://open.weibo.com/wiki/先注册账号,通过验证审核.然后的创建网页应用.微博审核不通过的原因就是域名和网站地址,一定要按实际写的.一定要 ...
-
Unity接入ShareSDK实现QQ登录和QQ分享、微信分享
原文链接:Unity接入ShareSDK实现QQ登录和QQ分享.微信分享 由于微信登录需要企业审核,我这里就不说明了,有需要的可以去官网看一下文档,和QQ登录比多了一个打包的步骤. 第一步:到官网申请 ...
-
QQ登录功能之如何获取用于本地测试的APPID
本文主要说明一下开发者如何在QQ互联创建测试应用,从而分配给我们一套APP ID和APP KEY,在我们平时学习的时候使用. 一.QQ互联注册开发者 要想使用QQ登陆的功能,首先你必须是腾讯开发者.腾 ...
-
网站集成QQ登录功能
最近在做一个项目时,客户要求网站能够集成QQ登录的功能,以前没做过这方面的开发,于是去QQ的开放平台官网研究了一下相关资料,经过自己的艰苦探索,终于实现了集成QQ登录的功能,现在把相关的开发经验总结一 ...
-
网站集成QQ登录功能(转)
最近在做一个项目时,客户要求网站能够集成QQ登录的功能,以前没做过这方面的开发,于是去QQ的开放平台官网研究了一下相关资料,经过自己的艰苦探索,终于实现了集成QQ登录的功能,现在把相关的开发经验总结一 ...
-
DRF框架QQ登录功能
用户模块---QQ登录 流程图 QQ登录文档:http://wiki.connect.qq.com/%E5%87%86%E5%A4%87%E5%B7%A5%E4%BD%9C_oauth2-0 流程简述 ...
-
[RN] React Native代码转换成微信小程序代码的转换引擎工具
React Native代码转换成微信小程序代码的转换引擎工具 https://github.com/areslabs/alita
-
java集成网站微信,微博,qq登录
微信 WechatConfig.java package com.meeno.chemical.common.sdk.wechat.config; import org.springframework ...
-
laravel5实现微信第三方登录功能
背景 最近手头一个项目需要实现用户在网站的第三方登录(微信和微博),后端框架laravel5.4. 实现过程以微信网页版第三方登录,其他于此类似,在此不做重复. 准备工作 网站应用微信登录是基于OAu ...
随机推荐
-
Format specifies type 'int' but the argument has type 'struct node *'
/Users/Rubert/IOS/iworkspace/LineList/LineList/main.c::: Format specifies type 'int' but the argumen ...
-
Java 基础命名空间
java.lang (提供利用 Java 编程语言进行程序设计的基础类)java.lang.annotation(提供了引用对象类,支持在某种程度上与垃圾回收器之间的交互)java.lang.inst ...
-
HDU 1231 最大连续子序列(水题)
题目链接: 传送门 最大连续子序列 Time Limit: 1000MS Memory Limit: 32768 K Description 给定K个整数的序列{ N1, N2, ..., N ...
-
java基础知识回顾之java Thread类学习(七)--java多线程安全问题(死锁)
死锁:是两个或者两个以上的线程被无限的阻塞,线程之间互相等待所需资源. 线程死锁产生的条件: 当两个线程相互调用Join()方法. 当两个线程使用嵌套的同步代码块的时候,一个线程占用了另一个线程的锁, ...
-
SQL Server索引语法 <;第四篇>;
从CREATE开始 通过显式的CREATE INDEX命令 在创建约束时作为隐含的对象 随约束创建的隐含索引 当向表中添加如下两种约束之一时,就会创建隐含索引. 主键约束(聚集索引) 唯一约束(唯一索 ...
-
检查 TCP 80 端口是否正常工作
检查 TCP 80 端口是否正常工作 2017-09-13 22:12:50 目录 Windows Server 2012 Windows Server 2008 CentOS 7.3 Ubuntu ...
-
Unique Binary Search Trees leetcode java
题目: Given n, how many structurally unique BST's (binary search trees) that store values 1...n? For e ...
-
mongodb 两小时入门
传统的计算机应用大多使用关系型数据库来存储数据,比如大家可能熟悉的MySql, Sqlite等等,它的特点是数据以表格(table)的形式储存起来的.数据库由一张张排列整齐的表格构成,就好像一个Exc ...
-
ORACLE BACKUP AND RECOVERY
ORACLE BACKUP AND RECOVERY http://www.oracle.com/webfolder/technetwork/tutorials/obe/db/11g/r2/2day_ ...
-
Mac环境下svn命令行的使用
在Windows环境中,我们一般使用TortoiseSVN来搭建svn环境.在Mac环境下,由于Mac自带了svn的服务器端和客户端功能,所以我们可以在不装任何第三方软件的前提下使用svn功能,不过还 ...