react native集成友盟登錄分享記錄1.0.0

本文以QQ和微信為例(首先需要申請相應平臺的AppKey 和 AppSecret)

1 到UM官網下載SDK(點擊社會化分享->點擊設置選擇要使用的平臺)
https://developer.umeng.com/sdk/reactnative
下載包包含(RN IOS Android)

屏幕快照 2018-06-22 下午1.37.08.png

最好整理下將內部的文件分類(里面有的文件藏得比較深)方便使用主要是安卓將所有文件,圖片,jar歸類
屏幕快照 2018-06-22 下午1.43.06.png
屏幕快照 2018-06-22 下午1.43.17.png
屏幕快照 2018-06-22 下午1.45.21.png

一 集成iOS
1.直接將整理好的文件夾拖入你的工程(包含 上圖中的iOS文件夾和ReactNative文件夾下的common_ios和share_ios)
添加平臺庫(由于本文使用的精簡版只需要添加一下兩個)
詳情:https://developer.umeng.com/docs/66632/detail/66825

libsqlite3.tbd
CoreGraphics.framework

2.在AppDelegate.m中注冊友盟Appkey和相應平臺Key以及注冊回調

#import "RNUMConfigure.h"
#import <UMShare/UMShare.h>

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  [UMConfigure setLogEnabled:YES];
  [RNUMConfigure initWithAppkey:@"umk" channel:@"App Store"];
  
  [[UMSocialManager defaultManager] setPlaform:UMSocialPlatformType_WechatSession appKey:@"wxk" appSecret:@"wxs" redirectURL:@"url"];
  [[UMSocialManager defaultManager] setPlaform:UMSocialPlatformType_QQ appKey:@"qqk" appSecret:nil redirectURL:@"url"];
}

//設置系統回調 支持所有iOS系統 
//注:此方法在swift4.1(Xcode 9.3)已廢棄,Objective-C項目不影響。 新浪 平臺外的其他平臺可在使用另外兩種回調方法。請看官方文檔
- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url sourceApplication:(NSString *)sourceApplication annotation:(id)annotation
{
  //6.3的新的API調用,是為了兼容國外平臺(例如:新版facebookSDK,VK等)的調用[如果用6.2的api調用會沒有回調],對國內平臺沒有影響
  BOOL result = [[UMSocialManager defaultManager] handleOpenURL:url sourceApplication:sourceApplication annotation:annotation];
  if (!result) {
    // 其他如支付等SDK的回調
  }
  return result;
}

3.在Info.plist文件中 (添加SSO白名單) 和 (配置URL Scheme)


<key>LSApplicationQueriesSchemes</key>
<array>
    <!-- 微信 URL Scheme 白名單-->
    <string>wechat</string>
    <string>weixin</string>
    <!-- QQ、Qzone URL Scheme 白名單-->
    <string>mqqapi</string>
    <string>mqq</string>
    <string>mqqOpensdkSSoLogin</string>
    <string>mqqconnect</string>
    <string>mqqopensdkdataline</string>
    <string>mqqopensdkgrouptribeshare</string>
    <string>mqqopensdkfriend</string>
    <string>mqqopensdkapi</string>
    <string>mqqopensdkapiV2</string>
    <string>mqqopensdkapiV3</string>
    <string>mqqopensdkapiV4</string>
    <string>mqzoneopensdk</string>
    <string>wtloginmqq</string>
    <string>wtloginmqq2</string>
    <string>mqqwpa</string>
    <string>mqzone</string>
    <string>mqzonev2</string>
    <string>mqzoneshare</string>
    <string>wtloginqzone</string>
    <string>mqzonewx</string>
    <string>mqzoneopensdkapiV2</string>
    <string>mqzoneopensdkapi19</string>
    <string>mqzoneopensdkapi</string>
    <string>mqqbrowser</string>
    <string>mttbrowser</string>
    <string>tim</string>
    <string>timapi</string>
    <string>timopensdkfriend</string>
    <string>timwpa</string>
    <string>timgamebindinggroup</string>
    <string>timapiwallet</string>
    <string>timOpensdkSSoLogin</string>
    <string>wtlogintim</string>
    <string>timopensdkgrouptribeshare</string>
    <string>timopensdkapiV4</string>
    <string>timgamebindinggroup</string>
    <string>timopensdkdataline</string>
    <string>wtlogintimV1</string>
    <string>timapiV1</string>
</array>

這里使用UM官方的圖
11474533850_.pic_hd.jpeg

QQ:
1、"tencent"+騰訊QQ互聯應用appID,如tencent100424468
2、“QQ”+騰訊QQ互聯應用appID轉換成十六進制(不足8位前面補0),如: QQ05fc5b14

微信:
直接只用微信平臺提供的key,如wxdc1e388c3822c80b
共三個URLTypes

二. 集成安卓

1 在整理好的安卓文件夾下創建libs文件夾將jar包全部放入并拖入
屏幕快照 2018-06-22 下午2.20.14.png
屏幕快照 2018-06-22 下午2.20.28.png

2.在build.gradle添加引用

dependencies {
   compile fileTree(include: ['*.jar'], dir: 'libs')
   compile 'com.android.support:appcompat-v7:23.0.1'
   compile 'com.facebook.react:react-native:+'
   // From node_modules
   compile files('libs/umeng-common-1.5.3.jar')
   compile files('libs/umeng-sharetool-6.9.2.jar')
   compile files('libs/umeng-shareboard-widget-6.9.2.jar')
   compile files('libs/umeng-share-wechat-simplify-6.9.2.jar')
   compile files('libs/umeng-share-QQ-simplify-6.9.2.jar')
   compile files('libs/umeng-share-core-6.9.2.jar')
}

3.將剩下的資源文件夾拖入工程res下,values本身就存在所以需要將values中的文件合并
屏幕快照 2018-06-22 下午2.25.09.png
屏幕快照 2018-06-22 下午2.25.41.png

4.為了方便管理在java文件包名目錄下創建兩個包文件夾um和wxapi
4.1.將ReactNative下的(common_android和share_android中的文件導入um包)
4.2.在wxapi文件夾下創建一個類WXEntryActivity并繼承WXCallbackActivity

完成后如圖
屏幕快照 2018-06-22 下午2.35.11.png

5.添加權限和平臺配置(注意:修改tencent-appkey和UM appkey Channel ID)

    <!-- UM必須的權限 -->
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
    <uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
    <uses-permission android:name="android.permission.READ_PHONE_STATE" />
    <uses-permission android:name="android.permission.INTERNET" />

    <!-- UM推薦的權限 -->
    <!-- UM添加如下權限,以便使用更多的第三方SDK和更精準的統計數據 -->
    <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
    <uses-permission android:name="android.permission.CHANGE_WIFI_STATE" />
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

    ...

<application

        ...

        <!--QQ-->
        <activity
            android:name="com.tencent.tauth.AuthActivity"
            android:launchMode="singleTask"
            android:noHistory="true" >
            <intent-filter>
                <action android:name="android.intent.action.VIEW" />

                <category android:name="android.intent.category.DEFAULT" />
                <category android:name="android.intent.category.BROWSABLE" />

                <data android:scheme="tencent100424468" />
            </intent-filter>
        </activity>
        <activity
            android:name="com.tencent.connect.common.AssistActivity"
            android:theme="@android:style/Theme.Translucent.NoTitleBar"
            android:configChanges="orientation|keyboardHidden|screenSize"/>

        <!--WeChat-->
        <activity
            android:name=".wxapi.WXEntryActivity"
            android:configChanges="keyboardHidden|orientation|screenSize"
            android:exported="true"
            android:theme="@android:style/Theme.Translucent.NoTitleBar" />

        <!--兼容舊版的SDK-->
        <meta-data android:value="YOUR_APP_KEY" android:name="UMENG_APPKEY"/>
        <meta-data android:value="Channel ID" android:name="UMENG_CHANNEL"/>
    </application>

6.在MainApplication文件下(添加一個包new DplusReactPackage(),配置umk wxk wxs qqid)

    @Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
          new MainReactPackage(),
              new DplusReactPackage()
      );
    }


  @Override
  public void onCreate() {
    super.onCreate();
    SoLoader.init(this, /* native exopackage */ false);

    Config.shareType = "react native";
    UMConfigure.init(this,"umk","umeng",UMConfigure.DEVICE_TYPE_PHONE,"");
  }

  // 配置平臺,將AppKey 和 AppSecret 換成你申請的即可
  // 【注意】QQ 和 QQ 空間是同一個設置(同一個key、AppSecret)
  {
    PlatformConfig.setWeixin("wxk", "wxs");
    PlatformConfig.setQQZone("qqid", "");
  }



7.在MainActivity中注冊模塊和回調添加兩個方法

ublic class MainActivity extends ReactActivity {

    /**
     * Returns the name of the main component registered from JavaScript.
     * This is used to schedule rendering of the component.
     */
    @Override
    protected String getMainComponentName() {
        return "studyUMR";
    }

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        ShareModule.initSocialSDK(this);
    }

    @Override
    public void onActivityResult(int requestCode, int resultCode, Intent data) {
        super.onActivityResult(requestCode, resultCode, data);
        UMShareAPI.get(this).onActivityResult(requestCode, resultCode, data);
    }
}

三.ReactNative使用就很簡單了
整理好的ReactNative文件夾中有一個js文件夾里面包含三個文件
AnalyticsUtil.js是友盟統計
PushUtil.js是友盟推送
ShareUtil.js是友盟登錄和分享

我們只使用ShareUtil.js

import UMShareModule from './Components/UMjs/ShareUtil'

...

       // 0    QQ
       // 2    微信
       // 3    朋友圈
       // 4    QQ空間

       授權登錄
       UMShareModule.auth(0,(code,result,message) =>{
           console.log(code,result,message);
       });
       調用模板分享
       UMShareModule.shareboard(
           '標題',
           'http://dev.umeng.com/images/tab2_1.png',
           'http://baidu.com',
           'title',[0,2,3,4],(code,message) =>{
               console.log(code,message);
       });

四.關于IOS QQ TIM登錄無法獲取用戶信息的BUG
但是QQ授權可以成功所以需要修改UMShareModule.m中的方法判斷如果是QQ登錄獲取用戶信息則自行獲取

RCT_EXPORT_METHOD(auth:(NSInteger)platform completion:(RCTResponseSenderBlock)completion)
{
 UMSocialPlatformType plf = [self platformType:platform];
 if (plf == UMSocialPlatformType_UnKnown) {
   if (completion) {
     completion(@[@(UMSocialPlatformType_UnKnown), @"invalid platform"]);
     return;
   }
 }
 
 if (UMSocialPlatformType_QQ == plf) {
   __weak typeof(self) weakSelf = self;
   
   [[UMSocialManager defaultManager] authWithPlatform:plf currentViewController:nil completion:^(id result, NSError *error) {
     
     //    "ret":0, // 返回碼
     //    "msg":"", // 錯誤信息,red<0
     //    "nickname":"Peter", //呢稱
     //    "figureurl":"http://qzapp.qlogo.cn/qzapp/111111/942FEA70050EEAFBD4DCE2C1FC775E56/30", //30x30
     //    "figureurl_1":"http://qzapp.qlogo.cn/qzapp/111111/942FEA70050EEAFBD4DCE2C1FC775E56/50", //50x50
     //    "figureurl_2":"http://qzapp.qlogo.cn/qzapp/111111/942FEA70050EEAFBD4DCE2C1FC775E56/100",//100x100
     //    "gender":"男",//性別
     //    "vip":"1", //黃鉆用戶
     //    "level":"7",//黃鉆等級
     //    "is_yellow_year_vip":"1"http://年費黃鉆用戶
     
     UMSocialUserInfoResponse *authInfo = result;
     NSString *url = @"https://graph.qq.com/user/get_user_info";
     NSDictionary *parameters = @{@"access_token":authInfo.accessToken,@"openid":authInfo.openid,@"oauth_consumer_key":@"1105307876"};
     [weakSelf GET:url parameters:parameters success:^(id result) {
       
       NSMutableDictionary *retDict = [NSMutableDictionary dictionaryWithCapacity:5];
       retDict[@"name"] = result[@"nickname"];
       retDict[@"iconurl"] = result[@"figureurl_2"];
       retDict[@"gender"] = result[@"gender"];
       retDict[@"city"] = result[@"city"];
       retDict[@"province"] = result[@"province"];
       
       completion(@[@200, retDict, @""]);
     } failed:^(NSError *error) {
       NSLog(@"-----%@",error);
     }];
   }];
 }else{
   [[UMSocialManager defaultManager] getUserInfoWithPlatform:plf currentViewController:nil completion:^(id result, NSError *error) {
     if (completion) {
       if (error) {
         NSString *msg = error.userInfo[@"NSLocalizedFailureReason"];
         if (!msg) {
           msg = error.userInfo[@"message"];
         }if (!msg) {
           msg = @"share failed";
         }
         NSInteger stCode = error.code;
         if(stCode == 2009){
           stCode = -1;
         }
         completion(@[@(stCode), @{}, msg]);
       } else {
         UMSocialUserInfoResponse *authInfo = result;
         
         NSMutableDictionary *retDict = [NSMutableDictionary dictionaryWithCapacity:8];
         retDict[@"uid"] = authInfo.uid;
         retDict[@"openid"] = authInfo.openid;
         retDict[@"unionid"] = authInfo.unionId;
         retDict[@"accessToken"] = authInfo.accessToken;
         retDict[@"refreshToken"] = authInfo.refreshToken;
         retDict[@"expiration"] = authInfo.expiration;
         
         retDict[@"name"] = authInfo.name;
         retDict[@"iconurl"] = authInfo.iconurl;
         retDict[@"gender"] = authInfo.unionGender;
         
         NSDictionary *originInfo = authInfo.originalResponse;
         retDict[@"city"] = originInfo[@"city"];
         retDict[@"province"] = originInfo[@"province"];
         retDict[@"country"] = originInfo[@"country"];
         
         completion(@[@200, retDict, @""]);
       }
     }
   }];
 }
 
}
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 注:前提條件已經在友盟官網生成了雙平臺的APPKey; 1、進入鏈接1或者鏈接2,已經可以查看基本的配置方式。 2...
    若水三千瓢閱讀 7,691評論 8 5
  • 產品概述 Android U-share 6.0sdk是在5.0+的基礎上做了進一步的優化,降低了包的大小,對于三...
    AiPuff閱讀 7,125評論 1 10
  • 前言 友盟能實現分享功能,友盟+申請第三方賬號的目的: 進行分享、授權操作需要在第三方平臺創建應用并提交審核,友盟...
    CoderZb閱讀 9,730評論 8 60
  • 一到黑夜,小園就發生了變化,這是我無意中發現的。 那天寢室的燈突然熄滅,坐在我對面的剛剛還言笑晏晏的小園,突然長出...
    郁郁鈺魚閱讀 350評論 0 0
  • 輕輕的 愛 就……走了 我用落葉將你埋葬 我不知道下一個春還會不會再來 只是,我不想再愛了 悄悄的 夢 就……碎了...
    喬玉兒閱讀 243評論 0 4