Skip to content

Commit 522ccb4

Browse files
nvh95nvh95
committed
chore: promote 2.x
1 parent 438d982 commit 522ccb4

File tree

1 file changed

+52
-27
lines changed

1 file changed

+52
-27
lines changed

‎README.md‎

Lines changed: 52 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,31 @@
11
# React Linked In Login Using OAuth 2.0
2+
23
<!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
4+
35
[![All Contributors](https://img.shields.io/badge/all_contributors-7-orange.svg?style=flat-square)](#contributors-)
6+
47
<!-- ALL-CONTRIBUTORS-BADGE:END -->
58

6-
[![npm package][npm-badge]][npm]
9+
## `react-linkedin-login-oauth2` version `2.0.0 alpha` is out with typescript and Next.js support. You can try it now by:
710

11+
```shell
12+
npm i react-linkedin-login-oauth2@alpha
13+
```
14+
15+
## See the usages here [https://github.com/nvh95/react-linkedin-login-oauth2/tree/2.x#usage](https://github.com/nvh95/react-linkedin-login-oauth2/tree/2.x#usage). Migration guide is coming soon.
816

17+
[![npm package][npm-badge]][npm]
918

1019
[npm-badge]: https://img.shields.io/npm/v/react-linkedin-login-oauth2.png
1120
[npm]: https://www.npmjs.org/package/react-linkedin-login-oauth2
1221

13-
1422
Demo: https://stupefied-goldberg-b44ee5.netlify.app/
1523

1624
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)
17-
See [Usage](#usage) and [Demo](#demo) for instruction.
25+
See [Usage](#usage) and [Demo](#demo) for instruction.
1826

1927
## Table of contents
28+
2029
- [Changelog](#changelog)
2130
- [Installation](#installation)
2231
- [Overview](#overview)
@@ -27,18 +36,23 @@ See [Usage](#usage) and [Demo](#demo) for instruction.
2736
- [Issues](#issues)
2837

2938
## Changelog
39+
3040
See [CHANGELOG.md](https://github.com/nvh95/react-linkedin-login-oauth2/blob/master/CHANGELOG.md)
3141

3242
## Installation
43+
3344
```
3445
npm install --save react-linkedin-login-oauth2
3546
```
3647

3748
## Overview
38-
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 `LinkedInPopUp` 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.
49+
50+
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 `LinkedInPopUp` 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.
3951

4052
## Usage
53+
4154
First, we create a button and provide required props
55+
4256
```
4357
import React, { Component } from 'react';
4458
@@ -65,7 +79,7 @@ class LinkedInPage extends Component {
6579
errorMessage: error.errorMessage,
6680
});
6781
}
68-
82+
6983
render() {
7084
const { code, errorMessage } = this.state;
7185
return (
@@ -90,6 +104,7 @@ export default LinkedInPage;
90104
```
91105

92106
Then we define a route to `redirect_url` and pass `LinkedInPopUp` to it as follow:
107+
93108
```
94109
import React, { Component } from 'react';
95110
import { LinkedInPopUp } from 'react-linkedin-login-oauth2';
@@ -113,7 +128,9 @@ class Demo extends Component {
113128
```
114129

115130
### Usage with custom button
131+
116132
You can render your own component by provide `renderElement` as following example:
133+
117134
```
118135
<LinkedIn
119136
clientId="81lx5we2omq9xh"
@@ -125,13 +142,14 @@ You can render your own component by provide `renderElement` as following exampl
125142
)}
126143
/>
127144
```
145+
128146
# Support IE
129147

130-
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)
148+
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)
131149

150+
1. Pass prop `supportIE`
151+
2. Pass `redirectPath` which has path route to `LinkedinPopUp` component, default value is `/linkedin` (for above example, `<Route exact path="/linkedin" component={LinkedInPopUp} />` => `redirectPath="/linkedin"`)
132152

133-
1. Pass prop `supportIE`
134-
2. Pass `redirectPath` which has path route to `LinkedinPopUp` component, default value is `/linkedin` (for above example, `<Route exact path="/linkedin" component={LinkedInPopUp} />` => `redirectPath="/linkedin"`)
135153
```
136154
<LinkedIn
137155
...
@@ -142,41 +160,48 @@ Earlier, this package might not work in IE11. The reason is that if popup and op
142160
```
143161

144162
## Demo
163+
145164
- Source code: https://github.com/nvh95/react-linkedin-login-oauth2-demo/blob/master/src/App.js
146165
- Online demo: [https://stupefied-goldberg-b44ee5.netlify.com/](https://stupefied-goldberg-b44ee5.netlify.com/)
166+
147167
## Props
148-
`LinkedIn` component:
149168

150-
| Parameter | value | is required | default |
151-
|---------------|----------|:-----------:|:----------------------------------------------------------------------------------:|
152-
| clientId | string | yes | |
153-
| redirectUri | string | yes | |
154-
| scope | string | yes | 'r_emailaddress' |
169+
`LinkedIn` component:
170+
171+
| Parameter | value | is required | default |
172+
| ------------- | -------- | :---------: | :--------------------------------------------------------------------------------: |
173+
| clientId | string | yes | |
174+
| redirectUri | string | yes | |
175+
| scope | string | yes | 'r_emailaddress' |
155176
| | | | See your app scope in `https://www.linkedin.com/developers/apps/${yourAppId}/auth` |
156-
| onSuccess | function | yes | |
157-
| onFailure | function | yes | |
158-
| className | string | no | 'btn-linkedin' |
159-
| style | object | no | |
160-
| disabled | boolean | no | false |
161-
| onClick | function | no | |
162-
| children | function | no | Linked in Signin button |
163-
| renderElement | function | no | Render prop to use a custom element, use props.onClick |
164-
| supportIE | boolean | no | false |
165-
| redirectPath | function | no | /linkedin |
177+
| onSuccess | function | yes | |
178+
| onFailure | function | yes | |
179+
| className | string | no | 'btn-linkedin' |
180+
| style | object | no | |
181+
| disabled | boolean | no | false |
182+
| onClick | function | no | |
183+
| children | function | no | Linked in Signin button |
184+
| renderElement | function | no | Render prop to use a custom element, use props.onClick |
185+
| supportIE | boolean | no | false |
186+
| redirectPath | function | no | /linkedin |
166187

167188
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)
168189

169190
`LinkedinPopUp` component:
170-
No parameters needed
191+
No parameters needed
192+
193+
## Issues
171194

172-
## Issues
173195
Please create an issue at [https://github.com/nvh95/react-linkedin-login-oauth2/issues](https://github.com/nvh95/react-linkedin-login-oauth2/issues). I will spend time to help you.
174196

175197
#### Failed to minify the code from this file: ./node_modules/react-linkedin-login-oauth2/node_modules/query-string/index.js:8
198+
176199
Please upgrade `react-linkedin-login-oauth2` to latest version following
200+
177201
```
178202
npm install --save react-linkedin-login-oauth2
179203
```
204+
180205
## Known issue
181206

182207
## Contributors ✨
@@ -203,4 +228,4 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
203228

204229
<!-- ALL-CONTRIBUTORS-LIST:END -->
205230

206-
This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!
231+
This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!

0 commit comments

Comments
 (0)