React Native 友盟分享和第三方登录iOS(与原生交互)
2017-10-25 10:41
543 查看
友盟分享和第三方登录配置的文档点我看友盟官方文档
1、首先我们需要在xcode中新建一个文件夹,
里面放置RCTUmengShare.h和RCTUmengShare.m文件
.h文件中的代码
.m文件中的代码
2、此时在React Native中建立一个文件夹,在里面创建index.js文件
3、相应的APPSECRET和APPKEY配置在Root.js中的componentDidMount中实现
4、实现方法如下:
友盟分享
第三方登录
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 *) cd35 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=>{});
相关文章推荐
- iOS:友盟SDK第三方登录 分享及友盟统计的使用
- React Native 集成分享第三方登录功能分享第三方登录模块开发(iOS)
- iOS:友盟SDK第三方登录 分享及友盟统计的使用
- iOS 友盟第三方登录分享(转载)
- [置顶] React Native实现第三方分享、登录功能(Android,IOS双平台)
- 友盟集成第三方登录 分享 (微信登录原生调用)
- 接入友盟分享和第三方登录sdk DownloadService报错
- IOS项目集成ShareSDK实现第三方登录、分享、关注等功能。
- IOS项目集成ShareSDK实现第三方登录、分享、关注等功能(备用)
- iOS:IOS项目集成ShareSDK实现第三方登录、分享、关注等功能。
- IOS项目集成ShareSDK实现第三方登录、分享、关注等功能。
- iOS开发- ShareSDK分享和第三方登录
- 安卓第三方友盟登录与分享
- IOS项目集成ShareSDK实现第三方登录、分享、关注等功能
- 基于友盟使用Swift3.0在Xcode8.0beta版中集成分享功能和第三方登录
- iOS webview打印功能的实现(包含系统原生分享交互视图)
- iOS开发 ios9.0后友盟第三方分享, qq微信找不到设备
- 友盟第三方分享登录
- Android使用友盟集成QQ、微信、微博等第三方分享与登录方法详解
- iOS 第三方分享Twitter授权的错误解决(友盟分享)