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

本文转自:https://blog.csdn.net/qq_39910762/article/details/86628896 写的很详细,点个赞。
我记录下来,方便下次使用

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

微博 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 :

 

以上便是 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;
}
 

 

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

登录成功返回的信息:

分享成功返回:

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

————————————————
版权声明:本文为CSDN博主「qq_39910762」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/qq_39910762/article/details/86628896

分享到:更多 ()

抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址