React Native 友盟分享和第三方登录iOS(与原生交互)

69 阅读 0 评论 46 点赞

我是靠谱客的博主仁爱帆布鞋，最近开发中收集的这篇文章主要介绍React Native 友盟分享和第三方登录iOS(与原生交互)，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

友盟分享和第三方登录配置的文档点我看友盟官方文档

1、首先我们需要在xcode中新建一个文件夹，
里面放置RCTUmengShare.h和RCTUmengShare.m文件

.h文件中的代码

#import <Foundation/Foundation.h>
#import <React/RCTBridgeModule.h>
@interface RCTUmengShare : NSObject<RCTBridgeModule>
@end

.m文件中的代码

#import "RCTUmengShare.h"
#import <UMSocialCore/UMSocialCore.h>
#import <UShareUI/UShareUI.h>
#import "AppDelegate.h"
#import <UIKit/UIKit.h>
#import <React/RCTImageLoader.h>
@interface RCTUmengShare ()
@end
@implementation RCTUmengShare
// 导出模块
RCT_EXPORT_MODULE()
// 友盟注册
RCT_EXPORT_METHOD(registerUMShare)
{
/* 打开调试日志 */
[[UMSocialManager defaultManager] openLog:YES];
/* 设置友盟appkey */
[[UMSocialManager defaultManager] setUmSocialAppkey:USHARE_DEMO_APPKEY];
}
/*
设置微信的appKey和appSecret
[微信平台从U-Share 4/5升级说明]http://dev.umeng.com/social/ios/%E8%BF%9B%E9%98%B6%E6%96%87%E6%A1%A3#1_1
*/
RCT_EXPORT_METHOD(configWeixin:(NSString *)key withSecret:(NSString *)secret)
{
[[UMSocialManager defaultManager] setPlaform:UMSocialPlatformType_WechatSession appKey:key appSecret:secret redirectURL:nil];
}
/* 设置分享到QQ互联的appID
* U-Share SDK为了兼容大部分平台命名，统一用appKey和appSecret进行参数设置，而QQ平台仅需将appID作为U-Share的appKey参数传进即可。
100424468.no permission of union id
[QQ/QZone平台集成说明]http://dev.umeng.com/social/ios/%E8%BF%9B%E9%98%B6%E6%96%87%E6%A1%A3#1_3
*/
RCT_EXPORT_METHOD(configQQZone:(NSString *)key withSecret:(NSString *)secret)
{
[[UMSocialManager defaultManager] setPlaform:UMSocialPlatformType_QQ appKey:key /*设置QQ平台的appID*/
appSecret:secret redirectURL:@"http://mobile.umeng.com/social"];
}
/*
设置新浪的appKey和appSecret
[新浪微博集成说明]http://dev.umeng.com/social/ios/%E8%BF%9B%E9%98%B6%E6%96%87%E6%A1%A3#1_2
*/
RCT_EXPORT_METHOD(configSinaWeibo:(NSString *)key withSecret:(NSString *)secret withRedirectUrl:(NSString *)redirectUrl)
{
[[UMSocialManager defaultManager] setPlaform:UMSocialPlatformType_Sina appKey:key
appSecret:secret redirectURL:redirectUrl];
}
/**
*
* 友盟分享和React Native交互方法
*/
RCT_REMAP_METHOD(shareLink, title:(NSString *)title
desc:(NSString *)desc
imageUrl:(NSString *)imageUrl
link:(NSString *)link
resolver:(RCTPromiseResolveBlock)resolve
rejecter:(RCTPromiseRejectBlock)reject
)
{
dispatch_sync(dispatch_get_main_queue(), ^{
[UMSocialUIManager setPreDefinePlatforms:@[@(UMSocialPlatformType_WechatSession),@(UMSocialPlatformType_WechatTimeLine),@(UMSocialPlatformType_QQ),@(UMSocialPlatformType_Sina)]];
[UMSocialUIManager showShareMenuViewInWindowWithPlatformSelectionBlock:^(UMSocialPlatformType platformType, NSDictionary *userInfo) {
//创建分享消息对象
UMSocialMessageObject *messageObject = [UMSocialMessageObject messageObject];
//创建网页内容对象
//
NSString* thumbURL = imageUrl;
//
NSURLRequest *imageRequest = [NSURLRequest requestWithURL:[NSURL URLWithString:imageUrl ? imageUrl : @""]];
//
[self.bridge.imageLoader loadImageWithURLRequest:imageRequest callback:^(NSError *error, UIImage *image) {
//

//
}]
UMShareWebpageObject *shareObject = [UMShareWebpageObject shareObjectWithTitle:title descr:desc thumImage:imageUrl ? imageUrl : [UIImage imageNamed:@"shareIcon"]];
//设置网页地址
shareObject.webpageUrl = link;
//分享消息对象设置分享内容对象
messageObject.shareObject = shareObject;
[self shareWithShareObject:messageObject platformType:platformType resolver:resolve rejecter:reject];
//调用分享接口
}];
});
}
-(void)shareWithShareObject:(UMSocialMessageObject *)messageObject platformType:(UMSocialPlatformType)platformType resolver:(RCTPromiseResolveBlock)resolve
rejecter:(RCTPromiseRejectBlock)reject
{
UIViewController * viewController = [UIApplication sharedApplication].keyWindow.rootViewController;
while (viewController.presentedViewController) {
viewController = viewController.presentedViewController;
}
switch (platformType) {
case UMSocialPlatformType_Sina:
{
resolve(@"新浪");
}
break;
case UMSocialPlatformType_WechatSession:
{
resolve(@"微信");
}
break;
case UMSocialPlatformType_WechatTimeLine:
{
resolve(@"微信");
}
break;
case UMSocialPlatformType_QQ:
{
resolve(@"QQ");
}
break;
default:
break;
}
[[UMSocialManager defaultManager] shareToPlatform:platformType messageObject:messageObject currentViewController:viewController completion:^(id data, NSError *error) {
if (error) {
UMSocialLogInfo(@"************Share fail with error %@*********",error);
}else{
if ([data isKindOfClass:[UMSocialShareResponse class]]) {
UMSocialShareResponse *resp = data;
//分享结果消息
UMSocialLogInfo(@"response message is %@",resp.message);
//第三方原始返回的数据
UMSocialLogInfo(@"response originalResponse data is %@",resp.originalResponse);
}else{
UMSocialLogInfo(@"response data is %@",data);
}
}
}];
}
/**
*
*
友盟第三方登录与React Native交互方法
*/
RCT_REMAP_METHOD(thirdPartyAuthorization,loginPlatformType:(NSString *)platform resolver:(RCTPromiseResolveBlock)resolve
rejecter:(RCTPromiseRejectBlock)reject){
UMSocialPlatformType platformType = UMSocialPlatformType_UnKnown;
if ([platform isEqualToString:@"新浪"]) {
platformType = UMSocialPlatformType_Sina;
}else if ([platform isEqualToString:@"QQ"]){
platformType = UMSocialPlatformType_QQ;
}else if ([platform isEqualToString:@"微信"]){
platformType = UMSocialPlatformType_WechatSession;
}
dispatch_async(dispatch_get_main_queue(), ^{ // 放在主线程中执行
@try {
UIViewController * viewController = [UIApplication sharedApplication].keyWindow.rootViewController;
while (viewController.presentedViewController) {
viewController = viewController.presentedViewController;
}
[[UMSocialManager defaultManager] getUserInfoWithPlatform:platformType currentViewController:viewController completion:^(id result, NSError *error) {
if(error){
reject(@"-1",@"授权失败",error);
}else{
if(result){ // 字段需要判断是否是空值
UMSocialUserInfoResponse *resp = result;
resolve(@{@"uid":resp.uid ? resp.uid : @"",
@"openid": resp.openid ? resp.openid : @"",
@"accessToken": resp.accessToken ? resp.accessToken : @"",
@"refreshToken": resp.refreshToken ? resp.refreshToken : @"",
@"expiration": resp.expiration ? resp.expiration : @"",
@"name": resp.name ? resp.name : @"",
@"iconurl": resp.iconurl ? resp.iconurl : @"",
@"gender": resp.gender ? resp.gender : @"",
@"originalResponse": resp.originalResponse ? resp.originalResponse : @"",
@"platform": platform});
}else{
}
}
}];
} @catch (NSException *exception) {
reject(@"-1",@"授权失败",nil);
}
});
}
@end

2、此时在React Native中建立一个文件夹，在里面创建index.js文件

import {NativeModules} from 'react-native';
const UmengShareUtil = NativeModules.UmengShare;
/**
* 初始化
* @param umAppKey
*/
function init(umAppKey) {
UmengShareUtil.init(umAppKey);
}
/**
* 配置微信分享
* @param key
* @param secret
*/
function configWeixin(key, secret) {
UmengShareUtil.configWeixin(key, secret);
}
/**
* 配置QQ分享
* @param event
* @param param
*/
function configQQZone(key, secret) {
UmengShareUtil.configQQZone(key, secret);
}
/**
* 配置新浪分享
* @param event
* @param param
*/
function configSinaWeibo(key, secret, redirectUrl) {
UmengShareUtil.configSinaWeibo(key, secret, redirectUrl);
}
/**
* 分享
* @param title
* @param desc
* @param imageUrl
* @param link
* @return {Promise.<*>}
*/
function shareLink(title, desc, imageUrl, link) {
return UmengShareUtil.shareLink(title, desc, imageUrl, link);
}
/**
*
第三方登录(传值"QQ","微信","新浪")
*/
function thirdPartyAuthorization(platform) {
return UmengShareUtil.thirdPartyAuthorization(platform);
}
export {configWeixin,configQQZone,configSinaWeibo,shareLink, thirdPartyAuthorization};

3、相应的APPSECRET和APPKEY配置在Root.js中的componentDidMount中实现


UmengShare.configWeixin(Config.WEIXIN_APPKEY, Config.WEIXIN_APPSECRET);
UmengShare.configQQZone(Config.QQ_APPKEY_IOS, Config.QQ_APPSECRET);
UmengShare.configSinaWeibo(Config.WEIBO_APPKEY_IOS, Config.WEIBO_APPSECRET, Config.WEIBO_REDIRECT_URL);

4、实现方法如下：

友盟分享

UmengShare.shareLink('我的酒窖', '描述', null, Config.HOST_H5 + '/newWineCellarList).then((data) => {});

第三方登录

// 这边遍历三个按钮，platformt传QQ 微信 新浪字符串给原生接受，也可以自己定义int类型也可以，但是要修改原生.m文件中的字符串
let platform = '';
switch (index) {
case 0: {
platform = "QQ";
break;
}
case 1: {
platform = "微信";
break;
}
case 2: {
platform = "新浪";
break;
}
default:
break;
}
UmengShare.thirdPartyAuthorization(platform).then(data => { }).catch(err=>{});