Skip to content

Commit 0638c4f

Browse files
committed
Merge branch 'master' of github.com:fullstackreact/react-native-oauth
* 'master' of github.com:fullstackreact/react-native-oauth: updated readme doc for google auth, and typo
2 parents 5d19188 + 44ac57e commit 0638c4f

File tree

1 file changed

+39
-27
lines changed

1 file changed

+39
-27
lines changed

README.md

Lines changed: 39 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@ As we are integrating with react-native, we have a little more setup to integrat
5757

5858
#### RCTLinkingManager
5959

60-
Since `react-native-oauth` depends upon the `RCTLinkingManager` (from react-native core), we'll need to make sure we link this in our app.
60+
Since `react-native-oauth` depends upon the `RCTLinkingManager` (from react-native core), we'll need to make sure we link this in our app.
6161

6262
In your app, add the following line to your `HEADER SEARCH PATHS`:
6363

@@ -80,9 +80,9 @@ To automatically link our `react-native-oauth` client to our application, use th
8080
react-native link react-native-oauth
8181
```
8282

83-
Note: due to some restrictions on iOS, this module requires you to install cocoapods. The process has been semi-automated through using the above `react-native link` command.
83+
Note: due to some restrictions on iOS, this module requires you to install cocoapods. The process has been semi-automated through using the above `react-native link` command.
8484

85-
Once you have linked this library, run the following command in the root directory:
85+
Once you have linked this library, run the following command in the root directory:
8686

8787
```
8888
(cd ios && pod install)
@@ -96,7 +96,7 @@ When working on iOS 10, we'll need to enable _Keychain Sharing Entitlement_ in _
9696

9797
### Android setup
9898

99-
We need to handle two steps in the installation process:
99+
We need to handle two steps in the installation process:
100100

101101
* link `react-native-oauth` to our project (`react-native link react-native-oauth`)
102102
* Add the `maven { url "https://jitpack.io" }` to our `android/build.gradle` file under `allProjects`. For example:
@@ -147,13 +147,13 @@ In addition, we'll need to set up the handlers within the iOS app. Add the follo
147147
NSURL *jsCodeLocation;
148148
149149
jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index.ios" fallbackResource:nil];
150-
150+
151151
// other existing setup here
152-
152+
153153
// ADD THIS LINE SOMEWHERE IN THIS FUNCTION
154154
[OAuthManager setupOAuthHandler:application];
155155
// ...
156-
156+
157157
[self.window makeKeyAndVisible];
158158
return YES;
159159
}
@@ -169,13 +169,13 @@ One note, *all* of the callback urls follow the scheme: `http://localhost/[provi
169169

170170
### Adding URL schemes
171171

172-
In order for our app to load through these callbacks, we need to tell our iOS app that we want to load them. In order to do that, we'll have to create some URL schemes to register our app. Some providers require specific schemes (mentioned later).
172+
In order for our app to load through these callbacks, we need to tell our iOS app that we want to load them. In order to do that, we'll have to create some URL schemes to register our app. Some providers require specific schemes (mentioned later).
173173

174174
These URL schemes can be added by navigating to to the `info` panel of our app in Xcode (see screenshot).
175175

176176
![](./resources/info-panel.png)
177177

178-
Let's add the appropriate one for our provider. For instance, to set up twitter, add the app name as a URL scheme in the URL scheme box.
178+
Let's add the appropriate one for our provider. For instance, to set up twitter, add the app name as a URL scheme in the URL scheme box.
179179

180180
![](./resources/url-schemes.png)
181181

@@ -225,7 +225,7 @@ The following list are the providers we've implemented thus far in `react-native
225225

226226
#### Twitter (iOS/Android)
227227

228-
To authenticate against twitter, we need to register a Twitter application. Register your twitter application (or create a new one at [apps.twitter.com](https://apps.twitter.com)).
228+
To authenticate against twitter, we need to register a Twitter application. Register your twitter application (or create a new one at [apps.twitter.com](https://apps.twitter.com)).
229229

230230
![](./resources/twitter/app.png)
231231

@@ -250,7 +250,7 @@ const config = {
250250

251251
#### Facebook (iOS/Android)
252252

253-
To add facebook authentication, we'll need to have a Facebook app. To create one (or use an existing one), navigate to [developers.facebook.com/](https://developers.facebook.com/).
253+
To add facebook authentication, we'll need to have a Facebook app. To create one (or use an existing one), navigate to [developers.facebook.com/](https://developers.facebook.com/).
254254

255255
![](./resources/facebook/dev.facebook.png)
256256

@@ -262,7 +262,7 @@ Before we leave the Facebook settings, we need to tell Facebook we have a new re
262262

263263
`fb{YOUR_APP_ID}`
264264

265-
For instance, my app ID in this example is: `1745641015707619`. In the `Bundle ID` field, I have added `fb1745641015707619`.
265+
For instance, my app ID in this example is: `1745641015707619`. In the `Bundle ID` field, I have added `fb1745641015707619`.
266266

267267
![](./resources/facebook/redirect-url.png)
268268

@@ -283,7 +283,7 @@ const config = {
283283

284284
#### Google (iOS)
285285

286-
To add Google auth to our application, first we'll need to create a google application. Create or use an existing one by heading to the [developers.google.com/](https://developers.google.com/) page (or the console directly at [https://console.developers.google.com](https://console.developers.google.com)).
286+
To add Google auth to our application, first we'll need to create a google application. Create or use an existing one by heading to the [developers.google.com/](https://developers.google.com/) page (or the console directly at [https://console.developers.google.com](https://console.developers.google.com)).
287287

288288
![](./resources/google/auth-page.png)
289289

@@ -314,7 +314,7 @@ To set up Google on Android, follow the same steps as before, except this time i
314314

315315
![](./resources/google/android-creds.png)
316316

317-
When creating an Android-specific configuration, create a file called `config/development.android.js`. React Native will load it instead of the `config/development.js` file automatically on Android.
317+
When creating an Android-specific configuration, create a file called `config/development.android.js`. React Native will load it instead of the `config/development.js` file automatically on Android.
318318

319319
#### Github (iOS/Android)
320320

@@ -342,7 +342,7 @@ const config = {
342342

343343
## Slack
344344

345-
We'll need to create an app first. Head to the slack developer docs at [https://slack.com/developers](https://slack.com/developers).
345+
We'll need to create an app first. Head to the slack developer docs at [https://slack.com/developers](https://slack.com/developers).
346346

347347
![](./resources/slack/dev.png)
348348

@@ -365,7 +365,7 @@ const config = {
365365
}
366366
```
367367

368-
Lastly, Slack requires us to add a redirect_url.
368+
Lastly, Slack requires us to add a redirect_url.
369369

370370
For **iOS**: the callback_url pattern is `${app_name}://oauth`, so make sure to add your redirect_url where it asks for them before starting to work with the API.
371371

@@ -401,29 +401,29 @@ The `resp` object is set as follows:
401401
authorized: true, (boolean)
402402
uuid: "UUID", (user UUID)
403403
credentials: {
404-
access_token: "access token",
404+
access_token: "access token",
405405
refresh_token: "refresh token",
406406
type: 1
407407
}
408408
}
409409
}
410410
```
411411

412-
The second argument accepts an object where we can ask for additional scopes, override default values, etc.
412+
The second argument accepts an object where we can ask for additional scopes, override default values, etc.
413413

414414
```javascript
415415
manager.authorize('google', {scopes: 'email,profile'})
416416
.then(resp => console.log(resp))
417417
.catch(err => console.log(err));
418418
```
419419

420-
* Scopes are a list of scopes _comma separated_ as a string.
420+
* Scopes are a list of scopes _comma separated_ as a string.
421421

422422
## Calling a provider's API
423423

424424
We can use OAuthManager to make requests to endpoints from our providers as well. For instance, let's say we want to get a user's time line from twitter. We would make the request to the url [https://api.twitter.com/1.1/statuses/user_timeline.json](https://api.twitter.com/1.1/statuses/user_timeline.json)
425425

426-
If our user has been authorized for thi request, we can execute the request using the credentials stored by the OAuthManager.
426+
If our user has been authorized for thi request, we can execute the request using the credentials stored by the OAuthManager.
427427

428428
The `makeRequest()` method accepts 3 parameters:
429429

@@ -434,7 +434,7 @@ The `makeRequest()` method accepts 3 parameters:
434434
We can pass a list of options for our request with the last argument. The keys OAuthManager recognizes are:
435435

436436
1. `params` - The query parameters
437-
2. `method` - The http method to make the request with.
437+
2. `method` - The http method to make the request with.
438438

439439
Available HTTP methods:
440440
* get
@@ -448,17 +448,29 @@ Available HTTP methods:
448448

449449
```javascript
450450
const userTimelineUrl = 'https://api.twitter.com/1.1/statuses/user_timeline.json';
451-
authManager
451+
manager
452452
.makeRequest('twitter', userTimelineUrl)
453453
.then(resp => {
454454
console.log('Data ->', resp.data);
455455
});
456456
```
457457

458+
"me" represents the authenticated user, in any call to the Google+ API
459+
460+
```javascript
461+
const googleUrl = 'https://www.googleapis.com/plus/v1/people/me';
462+
manager
463+
.makeRequest('google', googleUrl)
464+
.then(resp => {
465+
console.log('Data -> ', resp.data);
466+
});
467+
468+
```
469+
458470
It's possible to use just the path as well. For instance, making a request with Facebook at the `/me` endpoint can be:
459471

460472
```javascript
461-
authManager
473+
manager
462474
.makeRequest('facebook', '/me')
463475
.then(resp => {
464476
console.log('Data ->', resp.data);
@@ -468,9 +480,9 @@ authManager
468480
To add more data to our requests, we can pass a third argument:
469481

470482
```javascript
471-
authManager
472-
.makeRequest('facebook', '/me', {
473-
headers: { 'Content-Type': 'application/java' },
483+
manager
484+
.makeRequest('facebook', '/me', {
485+
headers: { 'Content-Type': 'application/java' },
474486
params: { email: '[email protected]' }
475487
})
476488
.then(resp => {
@@ -496,7 +508,7 @@ We can `deauthorize()` our user's from using the provider by calling the `deauth
496508
1. The `provider` we want to remove from our user credentials.
497509

498510
```javascript
499-
authManager.deauthorize('twitter');
511+
manager.deauthorize('twitter');
500512
```
501513

502514
## Contributing

0 commit comments

Comments
 (0)