第三方登陆功能分享&第三方登陆模块开发(iOS)

在咱们经常使用的App中常常会看到分享与第三方登陆的功能，能够说分享与第三方登陆已经成为了各大APP的必备功能。

对于产品运行与推广来讲，分享与第三方登陆不只能增强用户粘性，增长流量及新用户，也能提高用户存、留优化产品质量等。

各大平台都有对应的开发平台来提供分享与第三方登陆的服务，好比微信开发平台/腾讯开发平台、新浪开发者平台等。由于各大平台及相关SDK存在很大的差别，单独集成起来比较繁琐，为了快速集成分享与第三方登陆咱们可使用相应统一的服务提供商，经常使用的分享与登陆的提供商有umeng与shareSdk。

截止目前，但各大平台与集成服务的提供方都只提供了Native版本的SDK，没有对React Native作支持，为此要在React Native应用中添加分享与第三方登陆咱们须要开发出能供React Native应用使用的分享与登陆模块。

在这篇文章中我会向你们分享，在React Native中集分享第与三方登陆功能的流程以及分享与第三方登陆模块开发。

源码下载分享地址：http://www.jinhusns.com/Products/Download

第一步：集成准备

首先咱们须要到umeng官网申请一个开发者帐号。而后建立一个应用并获取appkey。 
在以后呢，咱们须要进行必不可少的一步就是，到各大平台申请第三方开发者帐号，关于申请的流程官网文档讲解的已经很详细了，在这里我再也不重复了。

各大平台申请服务所须要等待的时间不等，一般是1-3天就能够搞定，建议在申请的同时，就进行sdk的集成，等申请经过以后，在换成正式的帐号进行调试，这样一来开发申请两不误。

第二步：集成SDK

Umeng分享与登陆SDK支持经过Cocoapods的集成方式，经过这种方式咱们集成起来方便不少。

在你的项目根目录建立一个 podfile 文件，添加以下内容：

# 集成新浪微博
pod 'UMengUShare/Social/Sina'
# 集成微信
pod 'UMengUShare/Social/WeChat'
# 集成QQ
pod 'UMengUShare/Social/QQ'
# 集成邮件
pod 'UMengUShare/Social/Email'
# 集成短信
pod 'UMengUShare/Social/SMS'

如：

platform :ios, '7.0'

target 'imooc_gp' do
    pod 'UMengAnalytics'
    pod 'UMengUShare/UI'
    # 集成新浪微博
    pod 'UMengUShare/Social/Sina'
    # 集成微信
    pod 'UMengUShare/Social/WeChat'
    # 集成QQ
    pod 'UMengUShare/Social/QQ'
    # 集成邮件
    pod 'UMengUShare/Social/Email'
    # 集成短信
    pod 'UMengUShare/Social/SMS'
end

以上是我所选择集成的一些平台，如需选择其余平台能够参考：快速集成 
而后在terminal下运行命令以下：

pod install

 

若发现找不到相应的sdk，则须要执行pod update命令来更新U-Share SDK。

命令执行完成后便可完成统计SDK的下载安装。

而后，咱们打开项目项目根目录下的ios文件夹，会看到一个xxx.xcworkspace的文件： 

用XCode打开该文件就会看到咱们刚才集成的SDK了： 

若是咱们一个项目中有多个PROJECT，那么则须要用xcworkspace是来管理咱们的项目，咱们经过pod安装了统计sdk后，项目中会多出来一个名为Pods的PROJECT，因此后咱们须要经过xcworkspace来打开咱们的ios项目了。

第三步：构建分享及登陆模块

为了可以在React Native中使用umeng分享及登陆，咱们须要为刚才导出的sdk建立一个Native 模块而后经过桥接的方式供js部分进行调用。

建立UShare

在u_share模块中咱们建立了一个UShare类，该类主要负责umeng分享sdk之间的通讯。

/**
 * 分享组件
 * 出自：http://www.devio.org
 * GitHub:https://github.com/crazycodeboy
 * Eamil:crazycodeboy@gmail.com
 */
#import "UShare.h"
#import "UMSocialUIManager.h"
#import "UMSocialShareScrollView.h"

@implementation UShare
RCT_EXPORT_MODULE();

- (dispatch_queue_t)methodQueue{
  return dispatch_get_main_queue();
}

RCT_EXPORT_METHOD(share:(NSString *)title content:(NSString *)content imageUrl:(NSString*)imageUrl targetUrl:(NSString*)targetUrl successCallback:(RCTResponseSenderBlock*)successCallback errorCallback:(RCTResponseSenderBlock*)errorCallback )
{
  [UMSocialUIManager showShareMenuViewInWindowWithPlatformSelectionBlock:^(UMShareMenuSelectionView *shareSelectionView, UMSocialPlatformType platformType) {
    //建立分享消息对象
    UMSocialMessageObject *messageObject = [UMSocialMessageObject messageObject];
    //建立网页内容对象
    UMShareWebpageObject *shareObject = [UMShareWebpageObject shareObjectWithTitle:title descr:content thumImage:imageUrl];
    //设置网页地址
    shareObject.webpageUrl =targetUrl;

    //分享消息对象设置分享内容对象
    messageObject.shareObject = shareObject;

    //...省略部分代码，你也能够经过视频教程(http://coding.imooc.com/class/89.html)来学习实现分享第三方登陆的具体细节
  }];

}
@end

也能够查看实现分享第三方登陆的视频教程

代码解读：

方法：

share:(NSString *)title content:(NSString *)content imageUrl:(NSString*)imageUrl targetUrl:(NSString*)targetUrl successCallback:(RCTResponseSenderBlock*)successCallback errorCallback:(RCTResponseSenderBlock*)errorCallback )

负责调打开分享面板以及分享回调的处理。

另外，经过RCT_EXPORT_METHOD标识咱们向React Native暴露了share方法。

提示:由于咱们须要打开分享面板，这属于UI操做，因此咱们要在主线程中进行处理，不然会发生卡顿的现象，将方法切换到主线程中执行，咱们能够添加以下代码：

RCT_EXPORT_MODULE();

- (dispatch_queue_t)methodQueue{
  return dispatch_get_main_queue();
}

关于登陆：

分享和登陆采用的是同一套sdk，若是要在React Native中进第三方登陆，只须要在上述代码中添加下面的代码便可，方法和调用分享是同样的，有须要的朋友能够参考登陆集成来添加一下。

// 在须要进行获取登陆信息的UIViewController中加入以下代码
#import <UMSocialCore/UMSocialCore.h>

- (void)getUserInfoForPlatform:(UMSocialPlatformType)platformType
{
    [[UMSocialManager defaultManager] getUserInfoWithPlatform:platformType currentViewController:self completion:^(id result, NSError *error) {

        UMSocialUserInfoResponse *resp = result;

        // 第三方登陆数据(为空表示平台未提供)
        // 受权数据
        NSLog(@" uid: %@", resp.uid);
        NSLog(@" openid: %@", resp.openid);
        NSLog(@" accessToken: %@", resp.accessToken);
        NSLog(@" refreshToken: %@", resp.refreshToken);
        NSLog(@" expiration: %@", resp.expiration);

        // 用户数据
        NSLog(@" name: %@", resp.name);
        NSLog(@" iconurl: %@", resp.iconurl);
        NSLog(@" gender: %@", resp.gender);

        // 第三方平台SDK原始数据
        NSLog(@" originalResponse: %@", resp.originalResponse);
    }];
}

经过这里查看实现分享与第三方登陆的视频教程

环境配置

配置SSO白名单

由于分享与登陆SDK须要进行跳转到第三方分享与SSO受权登陆，在iOS9/10下就须要增长一个可跳转的白名单，即LSApplicationQueriesSchemes，不然将在SDK判断是否跳转时用到的canOpenURL时返回NO，进而只进行webview受权或受权/分享失败。 在项目中的info.plist中加入应用白名单，右键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>
</array>

上述代码根据所选择的平台不一样而略有差别，具体可参照快速集成：

经过这里查看实现分享与第三方登陆的视频教程

接下来咱们须要进行URL Scheme的设置：

URL Scheme

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

初始化设置

应用启动后进行U-Share和第三方平台的初始化工做，咱们须要在AppDelegate.m进行U-Share的初始化：

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
    [self initUmeng];
}
-(void)initUmeng{
  //UMeng分享
  //打开调试日志
  [[UMSocialManager defaultManager] openLog:YES];

  //设置友盟appkey
  [[UMSocialManager defaultManager] setUmSocialAppkey:UM_AppKey];

  //设置微信的appKey和appSecret
  [[UMSocialManager defaultManager] setPlaform:UMSocialPlatformType_WechatSession appKey:AppKey_WX appSecret:AppSecret_WX redirectURL:@"http://mobile.umeng.com/social"];


  //设置分享到QQ互联的appKey和appSecret
  [[UMSocialManager defaultManager] setPlaform:UMSocialPlatformType_QQ appKey:AppKey_QQ  appSecret:AppSecret_QQ redirectURL:@"http://mobile.umeng.com/social"];

  //设置新浪的appKey和appSecret
  [[UMSocialManager defaultManager] setPlaform:UMSocialPlatformType_Sina appKey:AppKey_WB  appSecret:AppSecret_WB redirectURL:@"http://sns.whalecloud.com/sina2/callback"];
}

上述代码根据所选择的平台不一样而略有差别，具体可参照快速集成：

另外，不要忘记在AppDelegate.m设置回调，以便分享或登陆完成以后可以跳转到咱们的应用。

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

经过这里查看实现分享与第三方登陆的视频教程

第四步：分享模块的使用

到目前为止呢，咱们的iOS分享模块已经建立好了，接下来呢咱们就可使用它了。

原生模块导出一个js模块

咱们建立一个UShare.js文件，而后添加以下代码：

import { NativeModules } from 'react-native';
module.exports = NativeModules.UShare;

这样以来呢，咱们就能够在JS模块中来使用分享以及第三方登陆了：

import UShare from '../common/UShare'//导入UShare.js
//...省略部分代码
UShare.share(shareApp.title, shareApp.content,
    shareApp.imgUrl,shareApp.url,()=>{},()=>{})