react-native umeng 第三方授权与分享

申请各个开放平台对应的应用

微博 https://open.weibo.com/apps

微信 https://open.weixin.qq.com

QQ  http://op.open.qq.com/manage_centerv2/android

---

使用的是 umeng 提供的技术

注册账号并创建应用

创建应用: https://mobile.umeng.com/platform/apps/list

注意保存创建应用的 AppKey

集成下载对应的 SDK ，点击 设置 选择完整版还是精简版

将下载的文件进行解压

然后将 Android 中的 .jar 文件保存到 libs 文件夹下，将 ReactNative 中的 .java 文件保存到 java 文件夹下

---

Android Studio 中进行配置

导入所有的 .jar 包

注: 因为我已经导入过了，所有没有 Add as Library... 这一项

接下来，在 app/build.gradle 下的依赖中看到我们导入进来的包

AndroidManifest.xml 添加对应权限

<!--分享-->
    <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.WRITE_EXTERNAL_STORAGE"/>
    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
    <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
    <uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" />

<application
      ...
      <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />

        <!--微信-->
        <activity
            android:name="com.umeng.weixin.callback.WXCallbackActivity"
            android:configChanges="keyboardHidden|orientation|screenSize"
            android:exported="true"
            android:screenOrientation="portrait"
            android:theme="@android:style/Theme.Translucent.NoTitleBar" />

        <!--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="tencent1108090716" /> //改成自己申请的appkey
            </intent-filter>
        </activity>
        <activity
            android:name="com.tencent.connect.common.AssistActivity"
            android:screenOrientation="portrait"
            android:theme="@android:style/Theme.Translucent.NoTitleBar"
            android:configChanges="orientation|keyboardHidden|screenSize"/>

        <!--微博-->
        <activity
            android:name="com.umeng.socialize.media.WBShareCallBackActivity"
            android:configChanges="keyboardHidden|orientation"
            android:theme="@android:style/Theme.Translucent.NoTitleBar"
            android:exported="false"
            android:screenOrientation="portrait" >
        </activity>
        <activity android:name="com.sina.weibo.sdk.web.WeiboSdkWebActivity"
            android:configChanges="keyboardHidden|orientation"
            android:exported="false"
            android:windowSoftInputMode="adjustResize"
            >
        </activity>
        <activity
            android:theme="@android:style/Theme.Translucent.NoTitleBar.Fullscreen"
            android:launchMode="singleTask"
            android:name="com.sina.weibo.sdk.share.WbShareTransActivity">
            <intent-filter>
                <action android:name="com.sina.weibo.sdk.action.ACTION_SDK_REQ_ACTIVITY" />
                <category android:name="android.intent.category.DEFAULT" />
            </intent-filter>

        </activity>

        <!--友盟-->
        <meta-data
            android:name="UMENG_APPKEY"
            android:value="5c2e3a80b465f5cc5200025e" > //umeng 的 appkey
        </meta-data>
    </application>

在你的包目录下新建文件夹 wxapi 创建 WXEntryActivity.java 文件引入微信的回调

package com.你的包名.wxapi;

import com.umeng.socialize.weixin.view.WXCallbackActivity;

public class WXEntryActivity extends WXCallbackActivity {
}

将之前的 java 文件引入进来

修改 MainApplication

public class MainApplication extends Application implements ReactApplication {

  private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
    ...

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

    @Override
    protected String getJSMainModuleName() {
      return "index";
    }
  };

  @Override
  public ReactNativeHost getReactNativeHost() {
    return mReactNativeHost;
  }

  @Override
  public void onCreate() {
    super.onCreate();
    SoLoader.init(this, /* native exopackage */ false);
    RNUMConfigure.init(this, "5c2e3a80b465f5cc5200025e", "Umeng", UMConfigure.DEVICE_TYPE_PHONE,""); 
    //RNUMConfture.init接口一共五个参数，其中第一个参数为Context，第二个参数为友盟Appkey，第三个参数为channel，第四个参数为应用类型（手机或平板），第五个参数为push的secret（如果没有使用push，可以为空
  }

    
  // 各平台对应的key，微博的回调地址就是这里的这个地址，如果不一致，登录微博会报 21322(重定向地址不匹配) 的错误码
  {
    PlatformConfig.setWeixin("wx7bb4c0dc814dce84", "095b292da04dddf01a604d1abbd9278a");
    PlatformConfig.setSinaWeibo("1372622714", "966b74b9f8c768a363b9c84253c55969", "http://sns.whalecloud.com");
    PlatformConfig.setQQZone("1108090716", "HYazaX153N9FzXQL");
  }

}

修改 MainActivity

public class MainActivity extends ReactActivity {

    ...

    @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);
    }
}

引入包: 只需将鼠标光标放在其中，使用 Alt+Enter 键即可自动引入进来

至此，Android Studio 配置完成

---

js 调用很简单(刚开始的时候也是一把辛酸泪( ⊙ o ⊙ )啊！)

import React, { Component } from 'react';
import {
    NativeModules
} from 'react-native'
import {
    Container,
    Content,
    Text,
    ListItem,
    Separator,
    H3,
} from 'native-base'

const Share = NativeModules.UMShareModule //这个属性名是从 ShareModule.java 中设置的

const content = '我是内容';
const img = 'http://dev.umeng.com/images/tab2_1.png';
const imgUrl = 'http://www.umeng.com/';
const title = 'title';

/**
 * 各平台所对应的数值在 ShareModule.java 中查看
 * 0 qq
 * 1 微博
 * 2 微信
 * 3 微信朋友圈
 * 4 qq空间
 */

export default class App extends Component {
    render() {
        return (
            <Container>
                <Content padder>
                    <Separator>
                        <Text>-- QQ --</Text>
                    </Separator>
                    <ListItem noIndent
                        onPress={() => {
                            Share.auth(0, (code,data,msg) => {
                                console.log(code) 
                                console.log(data) //返回的用户信息
                                console.log(msg)
                            })
                        }}
                    >
                        <Text>qq登录</Text>
                    </ListItem>
                    <ListItem noIndent
                        onPress={() => {
                            Share.share(content,img,imgUrl,title,0,(code,msg) =>{
                                console.log(code)
                                console.log(msg)
                            });
                        }}
                    >
                        <Text>qq分享</Text>
                    </ListItem>
                    <ListItem noIndent
                        onPress={() => {
                            Share.share(content,img,imgUrl,title,4,(code,msg) =>{
                                console.log(code)
                                console.log(msg)
                            });
                        }}
                    >
                        <Text>qq空间</Text>
                    </ListItem>

                    <Separator>
                        <Text>-- 微信 --</Text>
                    </Separator>
                    <ListItem noIndent
                        onPress={() => {
                            Share.auth(2, (code,data,msg) => {
                                console.log(code)
                                console.log(data)
                                console.log(msg)
                            })
                        }}
                    >
                        <Text>微信登录</Text>
                    </ListItem>
                    <ListItem noIndent
                        onPress={() => {
                            Share.share(content,img,imgUrl,title,2,(code,msg) =>{
                                console.log(code)
                                console.log(msg)
                            });
                        }}
                    >
                        <Text>微信分享</Text>
                    </ListItem>

                    <Separator>
                        <Text>-- 微博 --</Text>
                    </Separator>
                    <ListItem noIndent
                        onPress={() => {
                            Share.auth(1, (code,data,msg) => {
                                console.log(code)
                                console.log(data)
                                console.log(msg)
                            })
                        }}
                    >
                        <Text>微博登录</Text>
                    </ListItem>
                    <ListItem noIndent
                        onPress={() => {
                            Share.share(content,img,imgUrl,title,1,(code,msg) =>{
                                console.log(code)
                                console.log(msg)
                            });
                        }}
                    >
                        <Text>微博分享</Text>
                    </ListItem>
                </Content>
            </Container>
        )
    }
}

注: 微信登录功能需要付费才可以实现，其余均可以实现(qq是最简单的)

登录成功返回的信息

分享

---

遇到的问题：

1、签名一定要一致，如果申请时所设置的签名和运行手机上的签名不一致，微信调不起来，微博也会出错

2、微博登录问题 21322 ：

 授权回调页：http://sns.whalecloud.com

 取消授权回调页：https://api.weibo.com/oauth2/default.html

 

以上便是 Android 的社会化分享配置方法，有兴趣的也可以研究推送与统计功能

附上本人 react native 极光推送

 

---

 

iOS 配置

在项目中文件夹中添加 UMComponent 与 UMReactBridge 两个文件夹

将之前下载的文件打开 ios 找到 UMCommon.framework 拷贝到 UMCommponent 文件夹下

将 ios 下的 share 文件夹下的所有内容拷贝到 UMCommponent 文件夹下的 UMShare(新建此文件夹) 文件夹下

 

在 ReactNative 文件夹下将所有 iOS 平台的文件拷贝到 UMReactBridge 下

---

将刚才创建的两个文件夹导入到项目中

 

 

一下配置可在官网查看： 配置

加入依赖系统库

添加第三方平台库：查看

根据官网的说明进行一一添加，精简版的基本都不用添加

配置白名单，找到 info.plist 文件右键 Open As => Source Code 

白名单完整信息：白名单

QQ、微信、微博白名单：

<key>LSApplicationQueriesSchemes</key>
<array>
    <!-- 微信 URL Scheme 白名单-->
    <string>wechat</string>
    <string>weixin</string>

    <!-- 新浪微博 URL Scheme 白名单-->
    <string>sinaweibohd</string>
    <string>sinaweibo</string>
    <string>sinaweibosso</string>
    <string>weibosdk</string>
    <string>weibosdk2.5</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>

配置URL Scheme

URL Scheme是通过系统找到并跳转对应app的一类设置，通过向项目中的info.plist文件中加入URL types可使用第三方平台所注册的appkey信息向系统注册你的app，当跳转到第三方应用授权或分享后，可直接跳转回你的app

 

添加URL Types可工程设置面板设置

详细信息查看：URL_Scheme

初始化设置

AppDelegate.m 设置友盟 appkey 以及各个平台的 appkey 和 secret

/**
 * Copyright (c) 2015-present, Facebook, Inc.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

#import "AppDelegate.h"

#import <React/RCTBundleURLProvider.h>
#import <React/RCTRootView.h>

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

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  ...
  
  /* 打开调试日志 */
  [UMConfigure setLogEnabled:YES];
  
  /* 设置友盟appkey */
  [RNUMConfigure initWithAppkey:@"5c2e3ae4b465f59dfd00009a" channel:@"App Store"];
  
  /* 关闭强制验证https，可允许http图片分享，但需要在info.plist设置安全域名 */
  [UMSocialGlobal shareInstance].isUsingHttpsWhenShareContent = NO;
  
  /* 设置微信的appKey和appSecret */
  [[UMSocialManager defaultManager] setPlaform:UMSocialPlatformType_WechatSession appKey:@"wx7bb4c0dc814dce84" appSecret:@"095b292da04dddf01a604d1abbd9278a" redirectURL:@"http://mobile.umeng.com/social"];
  
  /* 设置分享到QQ互联的appID */
  [[UMSocialManager defaultManager] setPlaform:UMSocialPlatformType_QQ appKey:@"1108090716"/*设置QQ平台的appID*/  appSecret:nil redirectURL:@"http://mobile.umeng.com/social"];
  
  /* 设置新浪的appKey和appSecret */
  [[UMSocialManager defaultManager] setPlaform:UMSocialPlatformType_Sina appKey:@"1372622714"  appSecret:@"966b74b9f8c768a363b9c84253c55969" redirectURL:@"http://sns.whalecloud.com"]; //与微博的回调地址保持一致
  
  return YES;
}

@end

---

补充 

问题1：授权成功之后再次授权无法弹出授权界面

解决：打开 ShareModule.java 文件，找到 auth 方法，添加以下代码

UMShareConfig config = new UMShareConfig();
config.isNeedAuthOnGetUserInfo(true);
UMShareAPI.get(ma).setShareConfig(config);

 

问题2：iOS登录成功没有回调信息

解决：

在 AppDelegate.m 中添加

- (BOOL)application:(UIApplication *)app openURL:(NSURL *)url options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options
{
  BOOL result = [[UMSocialManager defaultManager] handleOpenURL:url];
  return YES;
}

- (BOOL)application:(UIApplication *)application handleOpenURL:(NSURL *)url
{
  BOOL result = [[UMSocialManager defaultManager] handleOpenURL:url];
  if (!result) {
    // 其他如支付等SDK的回调
  }
  return result;
}

//支持所有iOS系统
- (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];
  if (!result) {
    // 其他如支付等SDK的回调
  }
  return result;
}

 

---

 

 

在虚拟机中即可实现微博的登录与分享

登录成功返回的信息：

分享成功返回：

打开微博可以看到刚才的分享已成功