Skip to content
/ react-native-social-kit Public

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

www.yoai.com
27 stars 15 forks Branches Tags Activity
Star
Notifications You must be signed in to change notification settings

yoaicom/react-native-social-kit

BranchesTags

Repository files navigation

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中修改配置
<key>NSAppTransportSecurity</key>
    <dict>    
        <key>NSAllowsArbitraryLoads</key><true/>
    </dict>
或者针对指定域名开放权限，以支付宝为例：
<key>NSAppTransportSecurity</key>
    <dict>
        <key>NSExceptionDomains</key>
        <dict>
            <key>alipay.com</key>
            <dict>
                <key>NSIncludesSubdomains</key>
                <true/>
                <key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
                <true/>
                <key>NSTemporaryExceptionMinimumTLSVersion</key>
                <string>TLSv1.0</string>
                <key>NSTemporaryExceptionRequiresForwardSecrecy</key>
                <false/>
            </dict>
            <key>alipayobjects.com</key>
            <dict>
                <key>NSIncludesSubdomains</key>
                <true/>
                <key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
                <true/>
                <key>NSTemporaryExceptionMinimumTLSVersion</key>
                <string>TLSv1.0</string>
                <key>NSTemporaryExceptionRequiresForwardSecrecy</key>
                <false/>
            </dict>
        </dict>
    </dict>
微信

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

<key>LSApplicationQueriesSchemes</key>
<array>
    <string>wechat</string>
	<string>weixin</string>
</array>
微博

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

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

<key>LSApplicationQueriesSchemes</key>
<array>
    <string>sinaweibohd</string>
    <string>sinaweibo</string>
    <string>weibosdk</string>
    <string>weibosdk2.5</string>
</array>
QQ

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

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

<key>LSApplicationQueriesSchemes</key>
<array>
    <string>mqzone</string>
	<string>wtloginmqq2</string>
	<string>mqqopensdkapiV3</string>
	<string>mqqwpa</string>
	<string>mqqopensdkapiV2</string>
	<string>mqqOpensdkSSoLogin</string>
	<string>mqq</string>
</array>
支付宝

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

<key>LSApplicationQueriesSchemes</key>
<array>
    <string>alipay</string>
    <string>alipayshare</string>
</array>

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里添加：

<activity
  android:name=".wxapi.WXEntryActivity"
  android:exported="true"
  android:label="@string/app_name"
  android:theme="@android:style/Theme.Translucent.NoTitleBar"
  />
微博

不需要额外配置

QQ

在AndroidManifest.xml里添加：

<activity
  android:name="com.tencent.tauth.AuthActivity"
  android:launchMode="singleTask"
  android:noHistory="true">
  <intent-filter>
    <action android:name="android.intent.action.VIEW"/>
    <category android:name="android.intent.category.DEFAULT"/>
    <category android:name="android.intent.category.BROWSABLE"/>

    <data android:scheme="tencent222222"/>
  </intent-filter>
</activity>

注意其中的“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:''}

关于我们

成员

组织

About

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

www.yoai.com

Resources

Readme
Activity
Custom properties

Stars

27 stars

Watchers

7 watching

Forks

15 forks
Report repository

Releases

1 tags

Packages

No packages published

Contributors 2

  •  
  •  

Languages