对第三方社交账号SDK的封装,使开发者能在React Native App里使用授权、分享等功能-演道网

本网站用的阿里云ECS,推荐大家用。自己搞个学习研究也不错

react-native-social-kit

此项目志在提供对第三方社交SDK的功能封装,方便开发者在React Native应用中使用诸如授权、分享等功能。

目前仅支持授权功能,仅覆盖微信、新浪微博、QQ。

项目仍在开发中,功能不稳定,请耐心等待。

Demo

Demo

安装

npm install --save react-native-social-kit@latest

配置

iOS

需要使用Cocoapods来管理依赖。(诸如微信、QQ等第三方的官方SDK包含了大量依赖文件和Xcode配置,使用Cocoapods可以极大简化这些流程)

在Podfile里添加

target 'Demo' do

pod "react-native-social-kit", :path => '../node_modules/react-native-social-kit'

end

然后执行命令pod install。(是不是很简单!

修改AppDelegate.m文件如下:

    #import "WeixinModule.h"
    #import "WeiboModule.h"
    #import "QQModule.h"
    #import "AliModule.h"
    ...

    - (BOOL)application:(UIApplication *)application handleOpenURL:(NSURL *)url
    {
         return [WeixinModule handleOpenURL:url] || [WeiboModule handleOpenURL:url] || [QQModule handleOpenURL:url] || [AliModule handleUrl:url];
    }

    - (BOOL)application:(UIApplication *)application openURL:(NSURL *)url sourceApplication:(NSString *)sourceApplication annotation:(id)annotation
    {
        return [WeixinModule handleOpenURL:url] || [WeiboModule handleOpenURL:url] || [QQModule handleOpenURL:url] || [AliModule handleUrl:url];
    }
此外,为了适配iOS9.0中的App Transport Security(ATS)对http的限制,需要在info.plist中修改配置
NSAppTransportSecurity
        
        NSAllowsArbitraryLoads
    
或者针对指定域名开放权限,以支付宝为例:
NSAppTransportSecurity
    
        NSExceptionDomains
        
            alipay.com
            
                NSIncludesSubdomains
                
                NSTemporaryExceptionAllowsInsecureHTTPLoads
                
                NSTemporaryExceptionMinimumTLSVersion
                TLSv1.0
                NSTemporaryExceptionRequiresForwardSecrecy
                
            
            alipayobjects.com
            
                NSIncludesSubdomains
                
                NSTemporaryExceptionAllowsInsecureHTTPLoads
                
                NSTemporaryExceptionMinimumTLSVersion
                TLSv1.0
                NSTemporaryExceptionRequiresForwardSecrecy
                
            
        
    
微信

Xcode中选中TARGETS,在info标签栏的URL Types项目下添加子项,子项的URL Schemes为你所注册的应用程序的AppId。

LSApplicationQueriesSchemes

    wechat
    weixin

微博

Xcode中选中TARGETS,在info标签栏的URL Types项目下添加子项,子项的URL Schemes为“wb” + 你所注册的应用程序的App Key,如“wb204543436852”。

在你的app的plist中添加如下键值对:

LSApplicationQueriesSchemes

    sinaweibohd
    sinaweibo
    weibosdk
    weibosdk2.5

QQ

Xcode中选中TARGETS,在info标签栏的URL Types项目下添加子项,子项的URL Schemes为“tencent” + 你所注册的应用程序的App Key,如“tencent222222”。

在你的app的plist中添加如下键值对:

LSApplicationQueriesSchemes

    mqzone
    wtloginmqq2
    mqqopensdkapiV3
    mqqwpa
    mqqopensdkapiV2
    mqqOpensdkSSoLogin
    mqq

支付宝

Xcode中选中TARGETS,在info标签栏的URL Types项目下添加子项,子项的URL Schemes为你实际app的scheme名称。

LSApplicationQueriesSchemes

    alipay
    alipayshare

Android

请依次修改以下文件:

// file: settings.gradle
...
include ':react-native-social-kit'
project(':react-native-social-kit').projectDir = new File(settingsDir, '../node_modules/react-native-social-kit/android')
// file: app/build.gradle
...
dependencies {
    ...
    compile project(':react-native-social-kit')
}
// file: MainActivity.java
...
import com.yoai.reactnative.socialsdk.SocialPackage;
...
public class MainActivity extends ReactActivity {
    ...

    /**
     * A list of packages used by the app. If the app uses additional views
     * or modules besides the default ones, add more packages here.
     */
    @Override
    protected List<ReactPackage> getPackages() {
        return Arrays.<ReactPackage>asList(
            new MainReactPackage(),
            new SocialPackage() // Add our package
        );
    }
}

如果需要代码混淆,为了保证第三方SDK的正常使用,需要在proguard配置中加上:

-keep class com.tencent.mm.sdk.** {
   *;
}
微信

在你的包名相应目录下新建一个wxapi目录,并在该wxapi目录下新增一个WXEntryActivity类,该类继承自com.yoai.reactnative.social.weixin.WXEntryActivity

在AndroidManifest.xml里添加:


微博

不需要额外配置

QQ

在AndroidManifest.xml里添加:


  
    
    
    

    
  

注意其中的“tencent222222”格式为“tencent”+你所注册的应用程序的App Key,记得替换。

使用

In your JavaScript code:

import SocialKit from 'react-native-social-kit';
const {Weibo, Weixin, QQ, Ali} = SocialKit;

or simply

import {Weibo, Weixin, QQ, Ali} from 'react-native-social-kit';

Then, use it like:

Weibo.authorize({
  scope: "all",
  redirectUrl: 'https://api.weibo.com/oauth2/default.html'
}, (data) => {
  if (data.error) {
    //发生了错误
  } else if (data.cancel) {
    //用户取消了授权
  } else {
    console.log(JSON.stringify(data));
  }
});

注册App

SDKNAME.registerApp(appId/appKey, (data) => {
})

SDKNAME表示Weixin、Weibo、QQ ,Ali 下同

使用授权登陆等功能之前首先需要注册App,在js端写入如下代码 以QQ为例

  componentWillMount() {
    // 注册App
    QQ.registerApp(
      "222222"
    , (data) => {
    });
  }
参数配置
SDKNAME appKey/appId
Weixin appId
Weibo appKey
QQ appId

appKey/appId 可在各个开放平台注册获得

授权登陆API

SDKNAME.authorize(config, (data) => {
})
config

“OK”表示有此参数,”NA”表示没有此参数,”Not Yet”表示有此参数但是待实现。

key value Weixin Weibo QQ
redirectUrl 微博授权回调页,可不填,默认为”https://api.weibo.com/oauth2/default.html”, NA OK NA
scope① 授权的权限范围,可不填,默认最低权限 NA OK NA

①:scope 传入字符串,为微博权限范围 默认为””

data

通用授权结果

key value Weixin Weibo QQ
success 如果存在此字段,表示授权成功 OK OK OK
error 如果存在此字段,表示发生了错误 OK OK OK
cancel 如果为true,表示用户取消了授权 OK OK OK

微信授权结果

key value
code 用户换取access_token的code
country 微信用户当前国家信息
lang 微信客户端当前语言

微博授权结果

key value
requestUserInfo 对应的 request 中的自定义信息字典
uid 用户ID
accessToken 认证口令
refreshToken 当认证口令过期时用于换取认证口令的更新口令
expiresInSeconds 认证过期时间

QQ授权结果

key value
openId 用户授权登录后对该用户的唯一标识
accessToken Access Token凭证,用于后续访问各开放接口
expiresInSeconds Access Token的失效时间

以微信为例,授权代码如下

 auth() {
    Weixin.authorize(null, this.apiCallback.bind(this));
  }

分享API

SDKNAME.share(config, (data) => {
})

config内配置内容参数见下表

分享内容 scene① title description thumb② data③ text④ image④ webpage music video
text 选填 必填
image 选填 必填
webpage 选填 选填 选填 选填 选填 必填
music 选填 选填 选填 选填 选填 必填
video 选填 选填 选填 选填 选填 必填

①: 微信Scene默认为’session'(对话),可选’timeline'(朋友圈),’favorite'(收藏).微博没有scene参数,QQ此参数默认为’qq'(对话),可选’qzone'(QQ空间).

②: thumb为缩略图链接地址,微信,微博对缩略图的大小限制在32k,如传入的图片大小超过32k,则会被压缩到32K以内.

③: data参数为实际数据链接,如分享music时data表示后缀为.mp3的url.

④: 在微博中 text,image 于其他多媒体链接分别独立,可以同时分享(iOS端图片和多媒体暂时无法同时分享).QQ分享中,text与image配置title,description,thumb,属性生效.

data

通用分享结果

key value Weixin Weibo QQ
success 如果存在此字段,表示分享成功 OK OK OK
error 如果存在此字段,表示发生了错误 OK OK OK
cancel 如果为true,表示用户取消了分享 OK OK OK

以微信图片分享为例,代码如下

shareImage(scene) {
    Weixin.share({
      image:'http://static.yoaicdn.com/shoppc/images/cover_img_e1e9e6b.jpg',
      scene: scene,
    }, this.shareCallback.bind(this));
  }

具体参数配置见Demo

支付API

SDKNAME.pay(
config,
(data) => {
}
)
config参数配置
SDKNAME config
Weixin {timestamp:”,partnerid:”,prepayid:”,noncestr:”,timeStamp:”,package:”,sign:”} android需要添加appId
Ali {orderString: ”,appScheme:”}

关于我们

成员

组织

转载自演道,想查看更及时的互联网产品技术热点文章请点击http://go2live.cn

未经允许不得转载:演道网 » 对第三方社交账号SDK的封装,使开发者能在React Native App里使用授权、分享等功能-演道网

赞 (0)
分享到:更多 ()

评论 0

评论前必须登录!

登陆 注册