react native qq登录/微信登录实现(android端)

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栏目下添加如下代码如图：

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

签名获取推荐使用签名工具获取

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 => {})
}