react native qq登录/微信登录实现(android端)
QQ登录实现:
使用第三方库react-native-qq,链接
https://github.com/reactnativecn/react-native-qq
qq腾讯开放平台获取获取用户信息文档链接
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栏目下添加如下代码如图:
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里面添加
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) }) }
微信登录实现(react-native-wechat)
开源库地址
https://github.com/weflex/react-native-wechat
1.首先需要去微信开发平台去注册账号并且创建一个移动应用 链接 https://open.weixin.qq.com
签名获取推荐使用签名工具获取
![](https://img2018.cnblogs.com/blog/1425575/201903/1425575-20190326184059094-1231225852.png)
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在android/app/src/main/java/com/bat100Appwap/MainActivity.java文件,添加如下代码
newWeChatPackage() ,
导入引用:android/app/src/main/java/com/bat100Appwap
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(); } }
在android/app/src/main/AndroidManifest.xml注册
<activity android:name=".wxapi.WXEntryActivity" android:exported="true" android:label="@string/app_name" />
2.5在android/app/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 => {}) }