Skip to content

Commit 997a82c

Browse files
committed
updated readme doc for google auth, and typo
1 parent f4cd1f8 commit 997a82c

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

@@ -77,9 +77,9 @@ To automatically link our `react-native-oauth` client to our application, use th
7777
react-native link react-native-oauth
7878
```
7979

80-
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.
80+
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.
8181

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

8484
```
8585
(cd ios && pod install)
@@ -93,7 +93,7 @@ When working on iOS 10, we'll need to enable _Keychain Sharing Entitlement_ in _
9393

9494
### Android setup
9595

96-
We need to handle two steps in the installation process:
96+
We need to handle two steps in the installation process:
9797

9898
* link `react-native-oauth` to our project (`react-native link react-native-oauth`)
9999
* Add the `maven { url "https://jitpack.io" }` to our `android/build.gradle` file under `allProjects`. For example:
@@ -144,13 +144,13 @@ In addition, we'll need to set up the handlers within the iOS app. Add the follo
144144
NSURL *jsCodeLocation;
145145
146146
jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index.ios" fallbackResource:nil];
147-
147+
148148
// other existing setup here
149-
149+
150150
// ADD THIS LINE SOMEWHERE IN THIS FUNCTION
151151
[OAuthManager setupOAuthHandler:application];
152152
// ...
153-
153+
154154
[self.window makeKeyAndVisible];
155155
return YES;
156156
}
@@ -166,13 +166,13 @@ One note, *all* of the callback urls follow the scheme: `http://localhost/[provi
166166

167167
### Adding URL schemes
168168

169-
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).
169+
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).
170170

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

173173
![](./resources/info-panel.png)
174174

175-
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.
175+
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.
176176

177177
![](./resources/url-schemes.png)
178178

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

223223
#### Twitter (iOS/Android)
224224

225-
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)).
225+
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)).
226226

227227
![](./resources/twitter/app.png)
228228

@@ -247,7 +247,7 @@ const config = {
247247

248248
#### Facebook (iOS/Android)
249249

250-
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/).
250+
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/).
251251

252252
![](./resources/facebook/dev.facebook.png)
253253

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

260260
`fb{YOUR_APP_ID}`
261261

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

264264
![](./resources/facebook/redirect-url.png)
265265

@@ -280,7 +280,7 @@ const config = {
280280

281281
#### Google (iOS)
282282

283-
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)).
283+
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)).
284284

285285
![](./resources/google/auth-page.png)
286286

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

312312
![](./resources/google/android-creds.png)
313313

314-
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.
314+
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.
315315

316316
#### Github (iOS/Android)
317317

@@ -339,7 +339,7 @@ const config = {
339339

340340
## Slack
341341

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

344344
![](./resources/slack/dev.png)
345345

@@ -362,7 +362,7 @@ const config = {
362362
}
363363
```
364364

365-
Lastly, Slack requires us to add a redirect_url.
365+
Lastly, Slack requires us to add a redirect_url.
366366

367367
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.
368368

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

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

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

417-
* Scopes are a list of scopes _comma separated_ as a string.
417+
* Scopes are a list of scopes _comma separated_ as a string.
418418

419419
## Calling a provider's API
420420

421421
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)
422422

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

425425
The `makeRequest()` method accepts 3 parameters:
426426

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

433433
1. `params` - The query parameters
434-
2. `method` - The http method to make the request with.
434+
2. `method` - The http method to make the request with.
435435

436436
Available HTTP methods:
437437
* get
@@ -445,17 +445,29 @@ Available HTTP methods:
445445

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

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

457469
```javascript
458-
authManager
470+
manager
459471
.makeRequest('facebook', '/me')
460472
.then(resp => {
461473
console.log('Data ->', resp.data);
@@ -465,9 +477,9 @@ authManager
465477
To add more data to our requests, we can pass a third argument:
466478

467479
```javascript
468-
authManager
469-
.makeRequest('facebook', '/me', {
470-
headers: { 'Content-Type': 'application/java' },
480+
manager
481+
.makeRequest('facebook', '/me', {
482+
headers: { 'Content-Type': 'application/java' },
471483
params: { email: 'me+rocks@ari.io' }
472484
})
473485
.then(resp => {
@@ -493,7 +505,7 @@ We can `deauthorize()` our user's from using the provider by calling the `deauth
493505
1. The `provider` we want to remove from our user credentials.
494506

495507
```javascript
496-
authManager.deauthorize('twitter');
508+
manager.deauthorize('twitter');
497509
```
498510

499511
## Contributing

0 commit comments

Comments
 (0)