QQ登录实现：
使用第三方库react-native-qq，链接
https://github.com/reactnativecn/react-native-qq
qq腾讯开放平台获取获取用户信息文档链接
http://wiki.open.qq.com/wiki/mobile/get_simple_userinfo
1.安装npm包
yarn add react-native-qq 或 npm install react-native-qq --save
然后link执行 react-native link react-native-qq
2.配置android工程：
在android/app/build.gradle里，defaultConfig栏目下添加如下代码如图：
image
manifestPlaceholders = [
QQ_APPID: "平台申请的APPID"
]
3.检查配置
3.1在android/settings.gradle下：
include ':react-native-qq'
project(':react-native-qq').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-qq/android')
3.2在android/app/build.gradle下
dependencies {
compile project(':react-native-qq')
}
3.3 MainApplication getPackages里面添加
image
new QQPackage(),
导入库：
import cn.reactnative.modules.qq.QQPackage;
4.代码实现
qqLogin() {
let scopes ='get_user_info';
QQAPI.isQQInstalled()
.then(install => {
if (install) {
QQAPI.login(scopes)
.then((data) => {
if(data.errCode===0){
getRequest('https://graph.qq.com/user/get_simple_userinfo?access_token=' + data.access_token +'&openid=' + data.openid+'&oauth_consumer_key='+data.oauth_consumer_key)
.then(res => {
alert('用户信息' + JSON.stringify(res))
}).catch(err => {
})
}
}).catch((err) => {
alert('授权失败 失败信息为' +JSON.stringify(err))
})
}
})
.catch(unInstall => {
alert('没有安装QQ' + unInstall)
})
}
image
微信登录实现（react-native-wechat）
开源库地址
https://github.com/weflex/react-native-wechat
1.首先需要去微信开发平台去注册账号并且创建一个移动应用 链接 https://open.weixin.qq.com
签名获取推荐使用签名工具获取
image
2.Android版本安装配置方法,类似qq
2.1.在android/settings.gradle文件中添加如下代码:
include ':RCTWeChat'
project(':RCTWeChat').projectDir = newFile(rootProject.projectDir, '../node_modules/react-native-wechat/android')
2.2 .在android/app/build.gradle文件中的dependencies中添加模块依赖
dependencies {
compile project(':react-native-wechat')
}
2.3在MainActivity.java文件,添加如下代码
newWeChatPackage() ,
导入引用：
importcom.theweflex.react.WeChatPackage;
2.4在android包名下创建wxapi包名，在该包名底下创建WXEntryActivity.java类
import android.app.Activity;
import android.os.Bundle;
import com.theweflex.react.WeChatModule;
public class WXEntryActivity extends Activity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
WeChatModule.handleIntent(getIntent());
finish();
}
}
在AndroidManifest.xml注册
<activity
android:name=".wxapi.WXEntryActivity"
android:exported="true"
android:label="@string/app_name" />
2.5在proguard-rules.pro添加混淆
-keep classcom.tencent.mm.sdk.** {
*;
}
3.代码实现：
/**
* 微信登录注册
*/
componentDidMount() {
try {
WeChat.registerApp('你自己的wxid');
}catch (e) {
console.error(e);
}
}
/**
* 微信登录 之授权
*/
weixinLogin() {
let scope ='snsapi_userinfo';
let state ='wechat_sdk_abcs';
//判断微信是否安装
WeChat.isWXAppInstalled()
.then((isInstalled) => {
if (isInstalled) {
// 获取微信授权
WeChat.sendAuthRequest(scope, state)
.then(responseCode => {
//授权成功获取token
this.getAccessToken(responseCode);
})
.catch(error => {
alert('登录授权发生错误：', error.message, [
{text:'确定'}
]);
})
}else {
alert('没有安装微信', '请先安装微信客户端在进行登录', [
{text:'确定'}
])
}
})
}
/**
* 微信登录 获取 token
* @param responseCode
*/
getAccessToken(responseCode) {
let appId ='你申请的appid';
let secret ='你申请的secret';
switch (parseInt(responseCode.errCode)) {
// 用户换取access_token的code，仅在ErrCode为0时有效
case 0:
//获取token值
getRequest('https://api.weixin.qq.com/sns/oauth2/access_token?appid=' + appId +'&secret=' + secret +'&code=' + responseCode.code +'&grant_type=authorization_code')
.then(res => {
//授权成功，获取用户头像等信息
this.getUserInfoFormWx(res);
})
.catch(err => {
})
break;
case -4:
//用户拒绝
break;
case -2:
//用户取消
break;
}
}
/*** 微信登录 获取用户信息*/
getUserInfoFormWx(res)
{
getRequest('https://api.weixin.qq.com/sns/userinfo?access_token=' +
res.access_token +'&openid=' + res.openid).then(res =>
{
ToastAndroid.show('用户信息' + JSON.stringify(res),
ToastAndroid.SHORT)
}
).catch(err => {})
}
wx_jt.png
