前段時間自己試著用react-native寫一個小應用窥岩，對于我這個半路出家的前端，而且對Android也是一竅不通宏胯，踩過的坑不知道有多少谜酒。好在網(wǎng)上有很多前輩總結(jié)的經(jīng)驗，才讓我勉勉強強堅持下來芦鳍。好了嚷往，切入主題，說多了都是淚柠衅。
友盟（umeng）分享組件在app開發(fā)中應該是用的比較多的一套組件了皮仁，我也是通過在網(wǎng)上各種研究后才決定用他作為第三方登錄和分享，在react-native中想要集成友盟也是一件比較麻煩的事情菲宴，特別是對于沒有接觸過原生開發(fā)的同學贷祈。在這里要感謝 react native集成友盟登錄分享記錄1.0.0 這篇文章，不會的也可以看著友盟的官方文檔一步一步配置喝峦，只是官方文檔比較雜散势誊，但是能保證版本的同步。有時間我再把自己集成的過程貼出來谣蠢。
這次要說的是友盟的第三方登錄這一塊粟耻，比如說使用QQ登錄，默認情況下眉踱，當?shù)谝淮问跈?quán)的時候挤忙，會跳轉(zhuǎn)到授權(quán)界面，用戶可以選擇想要授權(quán)賬號等谈喳，授權(quán)成功后册烈，友盟會自己記錄一個授權(quán)狀態(tài)并生成一個refreshToken,在有效期內(nèi)當我們重新點擊QQ登錄時，你會發(fā)現(xiàn)不會和第一次一樣彈出授權(quán)選擇界面婿禽，而是直接使用上次授權(quán)的賬號直接獲取了授權(quán)信息赏僧。在有些情況下，這是可行的谈宛，但是仔細一想次哈，似乎又有點問題胎署。
一般的APP一般都有登錄和退出賬號吆录，假如我登錄后想要用另一個QQ賬號登錄（假裝有小號），如果按照友盟默認的行為琼牧，那么我退出登錄后再次點擊使用QQ登錄時恢筝，就不會出現(xiàn)授權(quán)界面，也就無法更換QQ賬號登錄巨坊，這肯定是不行的撬槽。
關鍵的地方來了，官方并沒有給出react-native的配置選項趾撵，網(wǎng)上找了一大圈都是原生的侄柔，作為小白根本不知道是改哪個地方共啃，而且原生的友盟SDK和 react-native的差別比較大，為了解決這事也是絞盡腦汁暂题，最后終于探索出來移剪，當然會原生的就不要笑話我了。
解決方法：
1薪者、找到如圖所示文件shareModule.java（即之前在友盟下載的分享組價包纵苛，我使用的是6.9.3版本），文件目錄根據(jù)自己的包來言津。
2攻人、在shareModule.java文件中查找 auth，會有一個auth的函數(shù)悬槽，如下
@ReactMethod //注意觀察這里怀吻，這里聲明是一個react方法
public void auth(final int sharemedia, final Callback successCallback){
runOnMainThread(new Runnable() {
@Override
public void run() {
UMShareAPI.get(ma).getPlatformInfo(ma, getShareMedia(sharemedia), new UMAuthListener() {
@Override
public void onStart(SHARE_MEDIA share_media) {
}
@Override
public void onComplete(SHARE_MEDIA share_media, int i, Map<String, String> map) {
WritableMap result = Arguments.createMap();
for (String key:map.keySet()){
result.putString(key,map.get(key));
Log.e("todoremove","key="+key+" value"+map.get(key).toString());
}
successCallback.invoke(0,result,"success");
}
@Override
public void onError(SHARE_MEDIA share_media, int i, Throwable throwable) {
WritableMap result = Arguments.createMap();
successCallback.invoke(1,result,throwable.getMessage());
}
@Override
public void onCancel(SHARE_MEDIA share_media, int i) {
WritableMap result = Arguments.createMap();
successCallback.invoke(2,result,"cancel");
}
});
}
});
}
這個函數(shù)的作用不知道大家看明白的沒有，是不是感覺在哪見過陷谱？沒錯烙博，這就是我們的授權(quán)函數(shù)，在react-native中我們會用到它烟逊，比如我要發(fā)起登錄授權(quán)的時候：
import ShareUtile from '../../utils/ShareUtil'
// 當我點擊登錄按鈕時,logintype為選擇的登錄方式渣窜，比如QQ登錄為 1
async userLogin(logintype) {
// 登錄
// 此處調(diào)用的就是上面提到的 auth 方法
ShareUtile.auth(logintype, async (code, result, message) => {
console.log(code)
console.log(result)
console.log(message)
if (code == 0) {
result.logintype = logintype;
// 下面是你自己的登錄邏輯
try {
let res = await Api.users.login(result);
console.log(res)
} catch (err) {
console.log(err)
}
}
});
}
這樣一來，我們就會想能不能自己添加一個方法宪躯，然后每次點擊登錄的時候先取消授權(quán)乔宿，再進行登錄呢，答案是肯定的访雪，怎么添加详瑞，其實友盟提供了一個刪除授權(quán)的函數(shù)deleteOauth(),參數(shù)和授權(quán)時的一樣，具體代碼看下面：
3臣缀、在shareModule.java中添加一個取消授權(quán)函數(shù)deleteOauth()坝橡，可以緊跟在auth()函數(shù)下面
// umeng取消登錄授權(quán)
@ReactMethod
public void deleteOauth(final int sharemedia,final Callback successCallback) {
UMShareAPI.get(ma).deleteOauth(ma, getShareMedia(sharemedia), new UMAuthListener() {
@Override
public void onStart(SHARE_MEDIA share_media) {
//開始取消授權(quán)
}
@Override
public void onComplete(SHARE_MEDIA share_media, int i, Map<String, String> map) {
//取消授權(quán)成功 i=1
successCallback.invoke(0,"success");
}
@Override
public void onError(SHARE_MEDIA share_media, int i, Throwable throwable) {
//取消授權(quán)出錯
successCallback.invoke(1,"error");
}
@Override
public void onCancel(SHARE_MEDIA share_media, int i) {
//取消
successCallback.invoke(0,"cancel");
}
});
}
注意：successCallback 為回調(diào)，這里我回調(diào)函數(shù)只保留了兩個參數(shù)精置，在react-native中調(diào)用的時候回調(diào)也只有兩個參數(shù)计寇，可根據(jù)自己習慣設置回調(diào)參數(shù)。
4脂倦、然后回到我們的登錄頁面進行登錄操作：
async userLogin(logintype) {
// 登錄
// 先執(zhí)行我們自己設置的取消授權(quán)操作番宁，然后在回調(diào)中再進行授權(quán)操作
ShareUtile.deleteOauth(logintype,async (code,message) => {
console.log(code)
console.log(message)
// 這里我沒有做取消授權(quán)是否成功的判斷，然后發(fā)起之前的授權(quán)操作
ShareUtile.auth(logintype, async (code, result, message) => {
console.log(code)
console.log(result)
console.log(message)
if (code == 0) {
result.logintype = logintype;
try {
let res = await Api.users.login(result);
console.log(res)
} catch (err) {
console.log(err)
}
}
});
})
}
好了赖阻，大功告成蝶押，這樣，每次我們需要重新登錄的時候就會彈出授權(quán)界面火欧，用戶可以選擇自己想要的賬號進行登錄棋电，其實找到地方之后不難茎截，關鍵是對于我們這種原生小白不知道從何下手，希望分享出來能幫助有需要的同學吧赶盔。畢竟我找了好久沒有找到合適的稼虎，祝大家學習愉快。
