Skip to content

Commit a16b68c

Browse files
nvh95nvh95
committed
chore: update readme
1 parent 28c3247 commit a16b68c

File tree

2 files changed

+123
-121
lines changed

2 files changed

+123
-121
lines changed

‎CHANGELOG.md‎

Lines changed: 19 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,34 @@
1+
## 2.x
2+
3+
- TBD
4+
5+
## 1.0.10
6+
7+
### Features
8+
9+
- Support React ^17.x
10+
111
## 1.0.9
12+
213
### Features
14+
315
- Remove prop `state`. It's generated automatically
416
- Add `style` prop
17+
518
### Fixes
19+
620
- Remove `index.css` to fix #13, #30
721

822
### Chores
23+
924
- Remove default class `btn-linkedin`
1025
- Inline button style. (TODO: To use children as renderElement in 2.x)
1126
- Update README to use image from `react-linkedin-login-oauth2/assets/linkedin.png`
1227

13-
1428
## 1.0.8
1529

1630
### Fixes
31+
1732
- Make `scope` to be a required property with default value of `r_emailaddress`
1833
- Make the pop up center of the screen
1934
- Update demo link in README.md
@@ -22,9 +37,11 @@
2237
### 1.0.7
2338

2439
### Features
40+
2541
- Be able to render custom element (Thank @YBeck for your contribution)
2642
- Support IE11, please see #support-ie in README.md for more detail
2743
- Check `state` to avoid CSRF attack
2844

2945
### Fixes
30-
- Remove unnecessary `console.log`
46+
47+
- Remove unnecessary `console.log`

‎README.md‎

Lines changed: 104 additions & 119 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313

1414
Demo: https://stupefied-goldberg-b44ee5.netlify.app/
1515

16-
This package is used to get authorization code for Linked In Log in feature using OAuth2 in a easy way. After have the authorization code, you can send it to server to continue to get information needed. For more, please see at [Authenticating with OAuth 2.0 - Linked In](https://developer.linkedin.com/docs/oauth2)
16+
This package is used to get authorization code for Linked In Log in feature using OAuth2 in a easy way. After have the authorization code, you can exchange to an access token by sending it to the server to continue to get information needed. For more details, please see at [Authorization Code Flow (3-legged OAuth)](https://docs.microsoft.com/en-us/linkedin/shared/authentication/authorization-code-flow)
1717
See [Usage](#usage) and [Demo](#demo) for instruction.
1818

1919
## Table of contents
@@ -34,153 +34,138 @@ See [CHANGELOG.md](https://github.com/nvh95/react-linkedin-login-oauth2/blob/mas
3434
## Installation
3535

3636
```
37-
npm install --save react-linkedin-login-oauth2
37+
npm install --save react-linkedin-login-oauth2@alpha
3838
```
3939

4040
## Overview
4141

42-
We will create a Linked In button (using `LinkedIn` component), after clicking on this button, a popup window will show up and ask for the permission. After we accepted, the pop up window will redirect to a specified URI which should be routed to `LinkedInCallback` component. It has responsible to notice our openning app the authorization code Linked In provides us. You can consider using `react-router-dom` as a possible solution.
42+
We will trigger `linkedInLogin` by using `useLinkedIn` (recommended) or `LinkedIn` (using render props technique) after click on Sign in with LinkedIn button, a popup window will show up and ask for the permission. After we accepted, the pop up window will redirect to `redirectUri` (should be `LinkedInCallback` component) then notice its opener about the authorization code Linked In provides us. You can use [react-router-dom](https://reactrouter.com/web) or [Next.js's file system routing](https://nextjs.org/docs/routing/introduction)
4343

4444
## Usage
4545

46-
First, we create a button and provide required props
47-
48-
```
49-
import React, { Component } from 'react';
50-
51-
import { LinkedIn } from 'react-linkedin-login-oauth2';
52-
import linkedin from 'react-linkedin-login-oauth2/assets/linkedin.png'
53-
54-
class LinkedInPage extends Component {
55-
state = {
56-
code: '',
57-
errorMessage: '',
58-
};
59-
60-
61-
handleSuccess = (data) => {
62-
this.setState({
63-
code: data.code,
64-
errorMessage: '',
65-
});
66-
}
67-
68-
handleFailure = (error) => {
69-
this.setState({
70-
code: '',
71-
errorMessage: error.errorMessage,
72-
});
73-
}
74-
75-
render() {
76-
const { code, errorMessage } = this.state;
77-
return (
78-
<div>
79-
<LinkedIn
80-
clientId="81lx5we2omq9xh"
81-
onFailure={this.handleFailure}
82-
onSuccess={this.handleSuccess}
83-
redirectUri="http://localhost:3000/linkedin"
84-
>
85-
<img src={linkedin} alt="Log in with Linked In" style={{ maxWidth: '180px' }} />
86-
</LinkedIn>
87-
{!code && <div>No code</div>}
88-
{code && <div>Code: {code}</div>}
89-
{errorMessage && <div>{errorMessage}</div>}
90-
</div>
91-
);
92-
}
46+
First, we create a button and provide required props:
47+
48+
```js
49+
import React, { useState } from 'react';
50+
51+
import { useLinkedIn } from 'react-linkedin-login-oauth2';
52+
// You can use provided image shipped by this package or using your own
53+
import linkedin from 'react-linkedin-login-oauth2';
54+
55+
function LinkedInPage() {
56+
const { linkedInLogin } = useLinkedIn({
57+
clientId: '86vhj2q7ukf83q',
58+
redirectUri: `${window.location.origin}/linkedin`, // for Next.js, you can use `${typeof window === 'object' && window.location.origin}/linkedin`
59+
onSuccess: (code) => {
60+
console.log(code);
61+
},
62+
onError: (error) => {
63+
console.log(error);
64+
},
65+
});
66+
67+
return (
68+
<img
69+
onClick={linkedInLogin}
70+
src={linkedin}
71+
alt="Sign in with Linked In"
72+
style={{ maxWidth: '180px', cursor: 'pointer' }}
73+
/>
74+
);
9375
}
76+
```
9477

95-
export default LinkedInPage;
78+
If you don't want to use hooks. This library offer render props option:
79+
80+
```js
81+
import React, { useState } from 'react';
82+
83+
import { LinkedIn } from '../src/LinkedIn';
84+
// You can use provided image shipped by this package or using your own
85+
import linkedin from '../assets/linkedin.png';
86+
87+
function LinkedInPage() {
88+
return (
89+
<LinkedIn
90+
clientId="86vhj2q7ukf83q"
91+
redirectUri={`${window.location.origin}/linkedin`}
92+
onSuccess={(code) => {
93+
console.log(code);
94+
}}
95+
onError={(error) => {
96+
console.log(error);
97+
}}
98+
>
99+
{({ linkedInLogin }) => (
100+
<img
101+
onClick={linkedInLogin}
102+
src={linkedin}
103+
alt="Sign in with Linked In"
104+
style={{ maxWidth: '180px', cursor: 'pointer' }}
105+
/>
106+
)}
107+
</LinkedIn>
108+
);
109+
}
96110
```
97111

98-
Then we define a route to `redirect_url` and pass `LinkedInCallback` to it as follow:
112+
Then we point `redirect_url` to `LinkedInCallback`. You can use [react-router-dom](https://reactrouter.com/web) or [Next.js's file system routing](https://nextjs.org/docs/routing/introduction)
99113

100-
```
101-
import React, { Component } from 'react';
114+
- `react-router-dom`:
115+
116+
```js
117+
import React from 'react';
102118
import { LinkedInCallback } from 'react-linkedin-login-oauth2';
103119

104-
import { render } from 'react-dom';
105120
import { BrowserRouter, Route, Switch } from 'react-router-dom';
106-
import LinkedInPage from './LinkedInPage';
107-
108-
class Demo extends Component {
109-
render() {
110-
return (
111-
<BrowserRouter>
112-
<Switch >
113-
<Route exact path="/linkedin" component={LinkedInCallback} />
114-
<Route path="/" component={LinkedInPage} />
115-
</Switch>
116-
</BrowserRouter>
117-
);
118-
}
121+
122+
function Demo() {
123+
return (
124+
<BrowserRouter>
125+
<Route exact path="/linkedin" component={LinkedInCallback} />
126+
</BrowserRouter>
127+
);
119128
}
120129
```
121130

122-
### Usage with custom button
131+
- Next.js's file system routing:
123132

124-
You can render your own component by provide `renderElement` as following example:
125-
126-
```
127-
<LinkedIn
128-
clientId="81lx5we2omq9xh"
129-
onFailure={this.handleFailure}
130-
onSuccess={this.handleSuccess}
131-
redirectUri="http://localhost:3000/linkedin"
132-
renderElement={({ onClick, disabled }) => (
133-
<button onClick={onClick} disabled={disabled}>Custom linkedin element</button>
134-
)}
135-
/>
133+
```js
134+
// pages/linkedin.js
135+
import { LinkedInCallback } from 'react-linkedin-login-oauth2';
136+
export default function LinkedInPage() {
137+
return <LinkedInCallback />;
138+
}
136139
```
137140

138141
# Support IE
139142

140-
Earlier, this package might not work in IE11. The reason is that if popup and opener do not have same domain, popup cannot send message to opener. For more information about this, please visit [here](https://stackoverflow.com/questions/21070553/postmessage-still-broken-on-ie11). From `1.0.7`, we can bypass this by open a popup to our page, then redirect to Linked In authorization page, it should work fine. IE11 is supported in `1.0.7`. Following is step to support it. (If you don't have need to support IE, please ignore this part)
141-
142-
1. Pass prop `supportIE`
143-
2. Pass `redirectPath` which has path route to `LinkedInCallback` component, default value is `/linkedin` (for above example, `<Route exact path="/linkedin" component={LinkedInCallback} />` => `redirectPath="/linkedin"`)
144-
145-
```
146-
<LinkedIn
147-
...
148-
supportIE
149-
redirectPath="/linkedin"
150-
...
151-
/>
152-
```
143+
- Support for IE is dropped from version `2`
153144

154145
## Demo
155146

156147
- Source code: https://github.com/nvh95/react-linkedin-login-oauth2-demo/blob/master/src/App.js
157-
- Online demo: [https://stupefied-goldberg-b44ee5.netlify.com/](https://stupefied-goldberg-b44ee5.netlify.com/)
148+
- In action: [https://stupefied-goldberg-b44ee5.netlify.app/](https://stupefied-goldberg-b44ee5.netlify.app/)
158149

159150
## Props
160151

161-
`LinkedIn` component:
162-
163-
| Parameter | value | is required | default |
164-
| ------------- | -------- | :---------: | :--------------------------------------------------------------------------------: |
165-
| clientId | string | yes | |
166-
| redirectUri | string | yes | |
167-
| scope | string | yes | 'r_emailaddress' |
168-
| | | | See your app scope in `https://www.linkedin.com/developers/apps/${yourAppId}/auth` |
169-
| onSuccess | function | yes | |
170-
| onFailure | function | yes | |
171-
| className | string | no | 'btn-linkedin' |
172-
| style | object | no | |
173-
| disabled | boolean | no | false |
174-
| onClick | function | no | |
175-
| children | function | no | Linked in Signin button |
176-
| renderElement | function | no | Render prop to use a custom element, use props.onClick |
177-
| supportIE | boolean | no | false |
178-
| redirectPath | function | no | /linkedin |
179-
180-
Read more about props here [https://docs.microsoft.com/en-us/linkedin/shared/authentication/authorization-code-flow?context=linkedin/context#step-2-request-an-authorization-code](https://docs.microsoft.com/en-us/linkedin/shared/authentication/authorization-code-flow?context=linkedin/context#step-2-request-an-authorization-code)
181-
182-
`LinkedInCallback` component:
183-
No parameters needed
152+
- `LinkedIn` component:
153+
154+
| Parameter | value | is required | default |
155+
| ----------- | -------- | :---------: | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: |
156+
| clientId | string | yes | |
157+
| redirectUri | string | yes | |
158+
| onSuccess | function | yes | |
159+
| onFailure | function | no | |
160+
| state | string | no | randomly generated string (recommend to keep default value) |
161+
| scope | string | no | 'r_emailaddress' |
162+
| | | | See your app scope [here](https://docs.microsoft.com/en-us/linkedin/shared/authentication/authentication?context=linkedin/context#permission-types). If there are more than one, delimited by a space |
163+
| children | function | no | Require if using `LinkedIn` component (render props) |
164+
165+
Reference: [https://docs.microsoft.com/en-us/linkedin/shared/authentication/authorization-code-flow?context=linkedin/context#step-2-request-an-authorization-code](https://docs.microsoft.com/en-us/linkedin/shared/authentication/authorization-code-flow?context=linkedin/context#step-2-request-an-authorization-code)
166+
167+
- `LinkedInCallback` component:
168+
No parameters needed
184169

185170
## Issues
186171

@@ -190,7 +175,7 @@ Please create an issue at [https://github.com/nvh95/react-linkedin-login-oauth2/
190175

191176
Please upgrade `react-linkedin-login-oauth2` to latest version following
192177

193-
```
178+
```shell
194179
npm install --save react-linkedin-login-oauth2
195180
```
196181

0 commit comments

Comments
 (0)