react native weibo login

react-native-weibo-login

React Native App接入微博登陸，不需要分享，在github找到了react-native-weibo，可惜該庫已經一年沒有更新，使用的不是最新的微博SDK（ android SDK版本：4.1，ios SDK版本3.2.1 ），不能很好的兼容最新的RN（ 0.55.4 ）版本，所以自己動手寫了這個庫，實現了微博登陸，沒實現分享功能。

Getting started

$ npm install react-native-weibo-login --save

or

yarn add react-native-weibo-login

Mostly automatic installation

$ react-native link react-native-weibo-login

Manual installation

iOS

1. Add node_modules/react-native-weibo-login/ios/WeiboSDK.bundle in you project, or else it will be crash.
   

2. In XCode, in the project navigator, right click Libraries ➜ Add Files to [your project's name] , Go to node_modules ➜ react-native-weibo-login and add RCTWeiBo.xcodeproj .

3. In XCode, in the project navigator, select your project.

   Add

   • libRCTWeiBo.a
   • QuartzCore.framework
   • ImageIO.framework
   • SystemConfiguration.framework
   • Security.framework
   • CoreTelephony.framework
   • CoreText.framework
   • UIKit.framework
   • Foundation.framework
   • CoreGraphics.framework
   • Photos.framework
   • libz.tbd
   • libsqlite3.tbd

   to your project's Build Phases ➜ Link Binary With Libraries .

4. In the project navigator, in Targets ➜ info ➜ URL types . Add new URL type, Identifier value is com.weibo , URL Schemes value is wb + you weibo appKey , such as: wb2317411734 .

5. Right click Info.plist open as source code, insert the following lines:

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

6. Copy the following in AppDelegate.m :

 - (BOOL)application:(UIApplication *)application openURL:(NSURL *)url
sourceApplication:(NSString *)sourceApplication annotation:(id)annotation
{
  return [RCTLinkingManager application:application openURL:url
                            sourceApplication:sourceApplication annotation:annotation];
}

Android

1. Open up android/app/src/main/java/[...]/MainActivity.java

• Add import com.gratong.WeiBoPackage; to the imports at the top of the file.
• Add new WeiBoPackage() to the list returned by the getPackages() method.

2. Append the following lines to android/settings.gradle :

    include ':react-native-weibo-login'
   project(':react-native-weibo-login').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-weibo-login/android')
   

3. Insert the following lines inside the dependencies block in android/app/build.gradle :

     compile project(':react-native-weibo-login')
   

4. Insert the following lines inside the allprojects block in android/build.gradle :

     maven { url "https://dl.bintray.com/thelasterstar/maven/" }
   

   such as:

    allprojects {
      repositories {
         mavenLocal()
         jcenter()
         maven { url "https://dl.bintray.com/thelasterstar/maven/" }
       }
   }
   

Config

• appKey: 你在微博開放平台上申請的應用程式ID
• scope：OAuth2.0 授權機制中authorize 介面的一個參數。透過Scope，平台將開放更多的微博核心功能給開發者，同時也加強使用者隱私保護，提升了使用者體驗，使用者在新OAuth2.0 授權頁中有權利選擇賦予應用程式的功能。目前Scope 支援傳入多個Scope 權限，並以逗號分隔。賦值為all代表請求所有scope權限。關於Scope 概念及注意事項，請參閱： http://open.weibo.com/wiki/Scope
• redirectURI：預設https://api.weibo.com/oauth2/default.html ，必須和sina微博開放平台中套用進階設定中的redirectURI設定的一致，不然會登入失敗

Usage

 import * as WeiBo from 'react-native-weibo-login' ;

let config = {
    appKey : "2317411734" ,
    scope : 'all' ,       
    redirectURI : 'https://api.weibo.com/oauth2/default.html' ,
}

WeiBo . login ( config )
    . then ( res => {  
        console . log ( 'login success:' , res )
        //登陆成功后打印出的数据如下：
        // { 
        //     refreshToken: '2.00Gc2PbDcecpWC127d0bc690FE7TzD',
        //     type: 'WBAuthorizeResponse',
        //     expirationDate: 1686362993740.243,
        //     userID: '3298780934',
        //     errCode: 0,
        //     accessToken: '2.00Gc2PbDcecpWCa981899f410o5hEX' 
        // }
    } ) . catch ( err => { 
        console . log ( 'login fail:' , err )
    } )