We will create an app and link to OAuth2 of Fitbit API which is focusing on iOS.
Thanks to this tutorial for great instructions on using Yahoo API. Many of the project are based on this article.
Different APIs have different limitations, so it would be harmful if you follow the guide above to try to create a Fitbit app. Follow this one if you want to save your time.
Step 1
Open your terminal and enter the code below
react-native init OauthExample npm install qs --save
Step 2
Set up your environment:
1.Open ios/your_project_name.xcodeproj
file to do the following configuration:
2.Link the Linking library in the project
- Click on your project. Go to
Build Settings / Search Paths / Header Search Paths
and add a path to the Linking library. - Here I choose to add
$(SRCROOT)/../node_modules/react-native/Libraries
and selectrecursive
.
3.Open AppDelegate.m
and add the following code after @implementation AppDelegate
:
- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url sourceApplication:(NSString *)sourceApplication annotation:(id)annotation { return [RCTLinkingManager application:application openURL:url sourceApplication:sourceApplication annotation:annotation]; }
Also add it on the top
#import "RCTLinkingManager.h"
- More information on Linking.
4.Register your app with a custom URL
- Click on your project. Go to
Info / URL Types
and add a custom Identifier and URL Scheme for your app. - Creating a custom URL scheme makes your app directable through typing
yoururlscheme://
in the address bar of a browser. - Identifier makes different apps with the same URL scheme differentiable.
5.Goto Fitbit dev and create an app
– In the Callback Domain field, it has to be the domain of the server or app for redirection after authentication.
Step3
Add a config.js
file to the root of directory, which contains:
export default { client_id: 'YOUR_CLIENT_ID', client_secret: 'YOUR_CLIENT_SECRET' }
Then run
npm install react-native run-ios
Ready to write codes into index.ios.js
.
1.Remember to
import {Linking} from 'react-native'; import config from './config.js'; import qs from 'qs';
2.add the below cdoe into index.ios.js
before class
:
function OAuth(client_id, cb) { // Listen to redirection Linking.addEventListener('url', handleUrl); function handleUrl(event){ console.log(event.url); Linking.removeEventListener('url', handleUrl); const [, query_string] = event.url.match(/\#(.*)/); console.log(query_string); const query = qs.parse(query_string); console.log(`query: ${JSON.stringify(query)}`); cb(query.access_token); } // Call OAuth const oauthurl = 'https://www.fitbit.com/oauth2/authorize?'+ qs.stringify({ client_id, response_type: 'token', scope: 'heartrate activity activity profile sleep', redirect_uri: 'mppy://fit', expires_in: '31536000', //state, }); console.log(oauthurl); Linking.openURL(oauthurl).catch(err => console.error('Error processing linking', err)); } //get your API data function getData(access_token) { fetch( 'https://api.fitbit.com/1/user/-/activities/heart/date/today/1d.json', { method: 'GET', headers: { 'Authorization': `Bearer ${access_token}` }, //body: `root=auto&path=${Math.random()}` } ).then((res) => { return res.json() }).then((res) => { console.log(`res: ${JSON.stringify(res)}`); }).catch((err) => { console.error('Error: ', err); }); }
3.write it into the class before
componentDidMount() { OAuth(config.client_id, getAPIData); }
Note
Thanks pyliaorachel for teaching me! Really thank you!