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