React-Native关于iOS系统使用友盟集成分享和第三方登陆以及远程推送功能的一次总结

最近公司在做一个APP项目,还是考虑到成本问题,So,技术上又一次选择了RN,考虑到项目功能上有第三方分享、第三方登陆、消息推送等高大上的功能,由于之前做过一次分享,用的是网友封装的友盟的分享,于是去官网看了下文档,惊奇的发现友盟已经专门集成了用于RN的SDK,并且分享、授权登陆、推送都有,不禁窃喜。就这样愉快的选择友盟了!

接下来就是去下载集成SDK了。

一、首先是集成分享和登陆

分享和登陆的具体集成在这篇文章里面。。

1、下载相关SDK

1.1、下载用于友盟集成的RN SDK

image.png

1.2、下载UMCommon.framework

image.png

注: 这个记得一定要下载iOS选项下面的SDK,后面集成的时候会用到,之前按教程集成的时候没有找到这个文件,就去友盟github的demo里面复制了这个文件,结果在集成的时候由于不是最新的版本,导致在Xcode10上面一直闪退,崩溃提示是[<UIStatusBarTimeItemView 0x101c29cd0> valueForUndefinedKey:]: this class is not key value coding-compliant for the...,后面的朋友如果碰到iOS升级之后项目编译异常的也可以考虑升级SDK试试。

image.png
2、使用Xcode进行集成iOS系统

2.1、首先进入项目的ios目录,进入对应的工程名目录,新建两个文件夹:UMReactBridgeUMComponents

image.png

2.2、将1.2步骤下载的文件iOS目录下的common中的framework,拷入UMComponents中。

image.png

1.1步骤下载的文件iOS目录下中share目录中的最后所有文件,拷入UMComponents中的新建文件夹UMShare中,在将push文件里最后的所有文件拷入UMComponents文件夹中。看下图:

1.1.jpg

1.2.jpg

集成之后在xcode中的目录结构是这样的:


image.png

2.3、进入1.1步骤下载文件的ReactNative目录,找到common、 share、push目录中对应的common_ios平台中的桥接.h 和 .m文件,全部拷贝至我们项目刚刚新建的UMReactBridge文件夹中,看下图:

image.png

[图片上传中...(image.png-5d6e35-1541834385822-0)]

image.png

集成之后xcode中的目录结构为:
image.png

2.4、在xcode中打开工程目录,右键黄色项目名Add Files to "xxx"options 中选中Create groups 、 Copy items if needed找到我们新建的UMReactBridgeUMComponents,最后点击add添加。看下图

image.png

2.5、## Linked Frameworks and Libraries加入系统依赖库:可参照链接

libsqlite3.tbd
CoreGraphics.framework
SystemConfiguration.framework
CoreTelephony.framework
libc++.tbd
libz.tbd

2.6 配置SSO白名单,右键info.plist选择source code打开(plist具体设置在Build Setting -> Packaging -> Info.plist File可获取plist路径)请根据选择的平台对以下配置进行裁剪:

<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>

    <!-- 支付宝 URL Scheme 白名单-->
    <string>alipay</string>
    <string>alipayshare</string>

    <!-- 钉钉 URL Scheme 白名单-->
      <string>dingtalk</string>
      <string>dingtalk-open</string>

    <!--Linkedin URL Scheme 白名单-->
    <string>linkedin</string>
    <string>linkedin-sdk2</string>
    <string>linkedin-sdk</string>

    <!-- 点点虫 URL Scheme 白名单-->
    <string>laiwangsso</string>

    <!-- 易信 URL Scheme 白名单-->
    <string>yixin</string>
    <string>yixinopenapi</string>

    <!-- instagram URL Scheme 白名单-->
    <string>instagram</string>

    <!-- whatsapp URL Scheme 白名单-->
    <string>whatsapp</string>

    <!-- line URL Scheme 白名单-->
    <string>line</string>

    <!-- Facebook URL Scheme 白名单-->
    <string>fbapi</string>
    <string>fb-messenger-api</string>
    <string>fbauth2</string>
    <string>fbshareextension</string>

    <!-- Kakao URL Scheme 白名单-->  
    <!-- 注:以下第一个参数需替换为自己的kakao appkey--> 
    <!-- 格式为 kakao + "kakao appkey"-->    
    <string>kakaofa63a0b2356e923f3edd6512d531f546</string>
    <string>kakaokompassauth</string>
    <string>storykompassauth</string>
    <string>kakaolink</string>
    <string>kakaotalk-4.5.0</string>
    <string>kakaostory-2.9.0</string>

   <!-- pinterest URL Scheme 白名单-->  
    <string>pinterestsdk.v1</string>

   <!-- Tumblr URL Scheme 白名单-->  
    <string>tumblr</string>

   <!-- 印象笔记 -->
    <string>evernote</string>
    <string>en</string>
    <string>enx</string>
    <string>evernotecid</string>
    <string>evernotemsg</string>

   <!-- 有道云笔记-->
    <string>youdaonote</string>
    <string>ynotedictfav</string>
    <string>com.youdao.note.todayViewNote</string>
    <string>ynotesharesdk</string>

   <!-- Google+-->
    <string>gplus</string>

   <!-- Pocket-->
    <string>pocket</string>
    <string>readitlater</string>
    <string>pocket-oauth-v1</string>
    <string>fb131450656879143</string>
    <string>en-readitlater-5776</string>
    <string>com.ideashower.ReadItLaterPro3</string>
    <string>com.ideashower.ReadItLaterPro</string>
    <string>com.ideashower.ReadItLaterProAlpha</string>
    <string>com.ideashower.ReadItLaterProEnterprise</string>

   <!-- VKontakte-->
    <string>vk</string>
    <string>vk-share</string>
    <string>vkauthorize</string>

   <!-- Twitter-->
    <string>twitter</string>
    <string>twitterauth</string>
</array>

image.png

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


image.png

image.png

2.8 初始化AppDelegate.m设置友盟appkeyappSecret(如果有推送功能的话需要加)以及各个平台的appkeysecret.

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  /* 打开调试日志 */
  [[UMSocialManager defaultManager] openLog:YES];
  
  /* 设置友盟appkey */
  [RNUMConfigure initWithAppkey:@"5bd*********0db" channel:@"App Store"];
  /*
   * 关闭强制验证https,可允许http图片分享,但需要在info.plist设置安全域名
   */
  [UMSocialGlobal shareInstance].isUsingHttpsWhenShareContent = NO;
  
  /*
   设置微信的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
   */
  [[UMSocialManager defaultManager] setPlaform:UMSocialPlatformType_WechatSession appKey:@"wxd******" appSecret:@"e7b246a7bdcfe75100e77eb9e999bf37" 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
   */
  
  [[UMSocialManager defaultManager] setPlaform:UMSocialPlatformType_QQ appKey:@"*****"/*设置QQ平台的appID*/  appSecret:@"*******" redirectURL:@"http://mobile.umeng.com/social"];
  
  // Push's basic setting 推送设置!!
  UMessageRegisterEntity * entity = [[UMessageRegisterEntity alloc] init];
  //type是对推送的几个参数的选择,可以选择一个或者多个。默认是三个全部打开,即:声音,弹窗,角标
  entity.types = UMessageAuthorizationOptionBadge|UMessageAuthorizationOptionAlert|UMessageAuthorizationOptionSound;
  [UNUserNotificationCenter currentNotificationCenter].delegate=self;
  
  [UMessage registerForRemoteNotificationsWithLaunchOptions:launchOptions Entity:nil completionHandler:^(BOOL granted, NSError * _Nullable error) {
    if (granted) {
      NSLog(@"deviceToken+++++++++");
    } else {
    }
  }];
return YES;
}

//从支付、分享、第三方登陆等跳转会本APP时的回调,必须实现,否则收不到分享成功时的回调!!!!
- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url sourceApplication:(NSString *)sourceApplication annotation:(id)annotation
  {
    BOOL result = [[UMSocialManager defaultManager] handleOpenURL:url];
    if (!result) {
      // 其他如支付等SDK的回调
    }
    return result;
  }

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

2.9、提供给RN调用的方法在UMShareModule.m中查看.

2.10、进入下载目录的ReactNative找到common下的js中的ShareUtil.js(包含分享和登陆的方法),拷贝到我们RN目录下,即可在RN中导入使用分享的方法啦。

image.png

2.11、在RN中调用

import ShareUtil from './ShareUtil';
//分享
 ShareUtile.shareboard(text,img,url,title,list,(code,message) =>{
   if (code == 200){
       this.setState({result:message});
   }
 });
text 为分享内容
img 为图片地址,可以为链接,本地地址以及res图片(如果使用res,请使用如下写法:res/icon.png)
url 为分享链接,可以为空
title 为分享链接的标题
list 为分享平台数组,如:var list = [0,1,2]
callback中code为错误码,当为0时,标记成功。message为错误信息

//第三方登陆
ShareUtile.auth(0,(code,result,message) =>{
        if (code == 200){// iOS平台
          //登陆成功,返回第三方账号的信息,
          //比如openID、nickName、headPath等信息,这时就可以传给自己的后台小伙伴入库啦!!!
        }
  });

注:android与ios平台成功回调中的code值不一致,ios成功时code===200,android成功时code===0,文档写的是0,当时还被小坑啦一把。

至此iOS端端分享和登陆已经完毕,至于安卓端集成由于同事负责,在此先不记录,后面会自己集成一遍。

二、集成远程推送功能

SDK端集成已经在分享和登陆步骤中已经集成,都有截图参考,下面直接进入功能实现步骤吧:

开始前的几点说明:
  • 其实对于推送功能,本质还是集成原生系统端推送功能,大部分代码逻辑还是在原生端实现,比如 注册推送权限、获取DeviceToken、设置推送提醒的类型,设置收到推送时的回调等。
  • 比较烦的是对推送证书的配置,注: 如果做推送的话必须是付费的开发者账号生成证书才可以,否则在Xcode里设置开启推送权限的时候会找不到该菜单项。看下图


    image.png
  • 具体的集成步骤以及证书生成参考友盟官网教程:
    证书配置
    集成步骤
  • 在推送的时候,可以通过设置不通的tag值对用户分组进行推送,也可以通过用户id进行精准推送,RN也提供来对应的方法 PushUtil.addTag(tag,(code,remain) =>{ })和PushUtil.addAlias(alias,type,(code) =>{ }),具体参考文档
  • 还有待优化的功能: 关于iOS如何在接收到推送后打开指定页面, 官方给的地址以及找不到了, 我自己的实现方法是在原生端收到推送消息后参考RN文档中原生端调用RN的方法使用通知来实现,期待朋友们有好的方法,期待赐教。

推送主要代码:
AppDelegate.h页面

#import <UIKit/UIKit.h>
#import <UMPush/UMessage.h>

//!!!!一定要实现这个代理方法 :UNUserNotificationCenterDelegate
@interface AppDelegate : UIResponder <UIApplicationDelegate,UNUserNotificationCenterDelegate>

@property (nonatomic, strong) UIWindow *window;

@end

AppDelegate.m页面

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

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

#import "YouMengNotice.h"

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  // Push's basic setting
  UMessageRegisterEntity * entity = [[UMessageRegisterEntity alloc] init];
  //type是对推送的几个参数的选择,可以选择一个或者多个。默认是三个全部打开,即:声音,弹窗,角标
  entity.types = UMessageAuthorizationOptionBadge|UMessageAuthorizationOptionAlert|UMessageAuthorizationOptionSound;
// 需要实现代理,用于下面代理方法的实现。
  [UNUserNotificationCenter currentNotificationCenter].delegate=self;
  
  [UMessage registerForRemoteNotificationsWithLaunchOptions:launchOptions Entity:nil completionHandler:^(BOOL granted, NSError * _Nullable error) {
    if (granted) {
      NSLog(@"deviceToken+++++++++");
    } else {
    }
  }];

}

#pragma mark - Push
//在这个方法打印出 deviceToken, 便于在友盟后台添加测试设备进行测试
-(void)application:(UIApplication *)application didRegisterForRemoteNotificationsWithDeviceToken:(NSData *)deviceToken{
  [UMessage registerDeviceToken:deviceToken];

  NSLog(@"deviceToken+++++++++%@",[[[[deviceToken description] stringByReplacingOccurrencesOfString: @"<" withString: @""]
                stringByReplacingOccurrencesOfString: @">" withString: @""]
               stringByReplacingOccurrencesOfString: @" " withString: @""]);
}

- (void)application:(UIApplication *)application didFailToRegisterForRemoteNotificationsWithError:(NSError *)error{
  
}
// 次方法在iOS10以后,已经不再支持
- (void)application:(UIApplication *)application didReceiveRemoteNotification:(NSDictionary *)userInfo
{
  //关闭友盟自带的弹出框
  [UMessage setAutoAlert:NO];
  [UMessage didReceiveRemoteNotification:userInfo];
  
  [YouMengNotice OCsendMessageToReactNative:userInfo];
  
}

//iOS10新增:处理前台收到通知的代理方法
-(void)userNotificationCenter:(UNUserNotificationCenter *)center willPresentNotification:(UNNotification *)notification withCompletionHandler:(void (^)(UNNotificationPresentationOptions))completionHandler{
  NSDictionary * userInfo = notification.request.content.userInfo;
  if([notification.request.trigger isKindOfClass:[UNPushNotificationTrigger class]]) {
    
    //应用处于前台时的远程推送接受
    //关闭友盟自带的弹出框
    [UMessage setAutoAlert:NO];
    //必须加这句代码
    [UMessage didReceiveRemoteNotification:userInfo];
    
    // 在这里自己实现来在接收到远程推送时,主动调用RN端的,把通知内容传给RN,这样就可以控制RN收到推送时跳转到指定页面来。
    [YouMengNotice OCsendMessageToReactNative:userInfo];
    
  }else{
    //应用处于前台时的本地推送接受
  }
  completionHandler(UNNotificationPresentationOptionSound|UNNotificationPresentationOptionBadge|UNNotificationPresentationOptionAlert);
}

//iOS10新增:处理后台点击通知的代理方法
//这个方法是在APP接收到通知之后,点击通知栏跳转到APP时才调用的, 注意::!!如果直接点击APP是没用的
//知识点!! iOS的通知 分APP在前台时显示和点击通知栏跳转到APP显示, 如果直接点击APP的话是不会走上面的两个回调方法的,之前理解错误
-(void)userNotificationCenter:(UNUserNotificationCenter *)center didReceiveNotificationResponse:(UNNotificationResponse *)response withCompletionHandler:(void (^)())completionHandler{
  NSDictionary * userInfo = response.notification.request.content.userInfo;
  if([response.notification.request.trigger isKindOfClass:[UNPushNotificationTrigger class]]) {
    
    //应用处于后台时的远程推送接受
    //必须加这句代码
    [UMessage didReceiveRemoteNotification:userInfo];
    [YouMengNotice performSelector:@selector(OCsendMessageToReactNative:) withObject:userInfo afterDelay:15];
//    [YouMengNotice OCsendMessageToReactNative:userInfo];
    
    
  }else{
    //应用处于后台时的本地推送接受
  }
}

RN端实现:

import PushUtil from "../Tools/PushUtil.js";
import { NativeModules, NativeEventEmitter } from "react-native";

const { YouMengNotice } = NativeModules;
const myNativeEvt = new NativeEventEmitter(YouMengNotice);  //创建自定义事件接口

componentDidMount() {
  //收到原生端发来的推送消息,这里处理页面跳转逻辑
   myNativeEvt.addListener("OCSendToRN", (e) => {
      console.log("原生端的消息");
      msg(JSON.stringify(e));
    });
//添加tag,即分组,在推送时可以对不同分组用户进行推送
    // PushUtil.addTag("ccj",(code, res) =>{
    //   Alert.alert("提示", ""+code+JSON.stringify(res));
    // })

    PushUtil.addTag("个人用户", (code, res) => {
      // Alert.alert("提示", ""+code+JSON.stringify(res));
    });

}

原生与RN交互参考:
https://www.jianshu.com/p/91bc0dea6821(在iOS12测试可以)
https://www.jianshu.com/p/99c32dc5cf29
https://blog.csdn.net/teagreen_red/article/details/79392477
参考:
https://www.jianshu.com/p/d54b259f7cb0
https://www.jianshu.com/p/32edded653ab

https://www.cnblogs.com/czq1989/p/5098871.html
推送注意事项:https://www.jianshu.com/p/e5a45a7e80a7

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 196,200评论 5 462
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 82,526评论 2 373
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 143,321评论 0 325
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,601评论 1 267
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,446评论 5 358
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,345评论 1 273
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,753评论 3 387
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,405评论 0 255
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,712评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,743评论 2 314
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,529评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,369评论 3 315
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,770评论 3 300
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,026评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,301评论 1 251
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,732评论 2 342
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,927评论 2 336

推荐阅读更多精彩内容

  • 1、通过CocoaPods安装项目名称项目信息 AFNetworking网络请求组件 FMDB本地数据库组件 SD...
    X先生_未知数的X阅读 15,961评论 3 119
  • 《总结》是英国小说家、剧作家毛姆的写作回忆录,毛姆在书中说,他十八岁时除了写作,什么也不想做,但羞于说出口,因为至...
    任西东阅读 282评论 0 1
  • 【谨以此献给带我关注金融的比特币和中本聪先生】 一切都发生的蛮突如其来的,欧盟,俄罗斯,韩国在半年中连下bitco...
    一个没人用的昵称阅读 327评论 0 1
  • 很幸运于今年加入科大讯飞,加入卧虎藏龙的大数据研究院。负责Odeon大数据平台前端方向的探索和研发工作。 在此之前...
    ODEON_BIGDATA阅读 2,153评论 3 4