第三方登陸功能分享&第三方登陸模塊開發(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,()=>{},()=>{})