Skip to content

Commit 2515377

Browse files
nvh95nvh95
committed
fix: make scope required + pop up center + update demo
1 parent 21b2c15 commit 2515377

File tree

4 files changed

+42
-25
lines changed

4 files changed

+42
-25
lines changed

‎CHANGELOG.md‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
## 1.0.8
2+
3+
### Fixes
4+
- Make `scope` to be a required property with default value of `r_emailaddress`
5+
- Make the pop up center of the screen
6+
- Update demo link in README.md
7+
- Update scope for demo

‎README.md‎

Lines changed: 17 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
[npm]: https://www.npmjs.org/package/react-linkedin-login-oauth2
99

1010

11-
Demo: https://stupefied-goldberg-b44ee5.netlify.com/
11+
Demo: https://stupefied-goldberg-b44ee5.netlify.app/
1212

1313
This package is used to get authorization code for Linked In Log in feature using OAuth2 in a easy way, without redirecting your application to linked in authorization page. 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)
1414
See `demo/src/index.js` for examples.
@@ -157,21 +157,22 @@ Or via this link:
157157
## Props
158158
`LinkedIn` component:
159159

160-
| Parameter | value | is required | default |
161-
|-------------|----------|:-----------:|:-----------------------:|
162-
| clientId | string | yes | |
163-
| redirectUri | string | yes | |
164-
| scope | string | no |Default member permissions defined in application configuration|
165-
| state | string | no | fdsf78fyds7fm |
166-
| onSuccess | function | yes | |
167-
| onFailure | function | yes | |
168-
| className | string | no | 'btn-linkedin' |
169-
| disabled | boolean | no | false |
170-
| onClick | function | no | |
171-
| children | function | no | Linked in Signin button |
172-
| renderElement | function | no | Render prop to use a custom element, use props.onClick |
173-
| supportIE | boolean | no | false |
174-
| redirectPath | function | no | /linkedin |
160+
| Parameter | value | is required | default |
161+
|---------------|----------|:-----------:|:----------------------------------------------------------------------------------:|
162+
| clientId | string | yes | |
163+
| redirectUri | string | yes | |
164+
| scope | string | yes | 'r_emailaddress' |
165+
| | | | See your app scope in `https://www.linkedin.com/developers/apps/${yourAppId}/auth` |
166+
| onSuccess | function | yes | |
167+
| onFailure | function | yes | |
168+
| state | string | no | fdsf78fyds7fm |
169+
| className | string | no | 'btn-linkedin' |
170+
| disabled | boolean | no | false |
171+
| onClick | function | no | |
172+
| children | function | no | Linked in Signin button |
173+
| renderElement | function | no | Render prop to use a custom element, use props.onClick |
174+
| supportIE | boolean | no | false |
175+
| redirectPath | function | no | /linkedin |
175176

176177
Read more about props here [https://developer.linkedin.com/docs/oauth2](https://developer.linkedin.com/docs/oauth2)
177178

‎demo/src/LinkedInPage.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ class LinkedInPage extends Component {
2929
<LinkedIn
3030
clientId="81lx5we2omq9xh"
3131
redirectUri={`${window.location.origin}/linkedin`}
32-
scope="r_emailaddress w_share"
32+
scope="r_emailaddress"
3333
state="34232423"
3434
onFailure={this.handleFailure}
3535
onSuccess={this.handleSuccess}

‎src/LinkedIn.js‎

Lines changed: 17 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,15 @@ import React, { Component } from 'react';
22
import PropTypes from 'prop-types';
33
import '../assets/index.css';
44

5+
const getPopupPositionProperties = ({
6+
width = 600,
7+
height = 600,
8+
}) => {
9+
const left = (screen.width / 2) - (width / 2);
10+
const top = (screen.height / 2) - (height / 2);
11+
return `left=${left},top=${top},width=${width},height=${height}`;
12+
}
13+
514
export class LinkedIn extends Component {
615
static propTypes = {
716
className: PropTypes.string,
@@ -20,9 +29,8 @@ export class LinkedIn extends Component {
2029
}
2130

2231
getUrl = () => {
23-
const {redirectUri, clientId, state, scope, supportIE, redirectPath } = this.props;
24-
// TODO: Support IE 11
25-
const scopeParam = (scope) ? `&scope=${supportIE ? scope : encodeURI(scope)}` : '';
32+
const { redirectUri, clientId, state, scope, supportIE, redirectPath } = this.props;
33+
const scopeParam = `&scope=${supportIE ? scope : encodeURI(scope)}`;
2634
const linkedInAuthenLink = `https://www.linkedin.com/oauth/v2/authorization?response_type=code&client_id=${clientId}&redirect_uri=${redirectUri}${scopeParam}&state=${state}`;
2735
if (supportIE) {
2836
const redirectLink = `${window.location.origin}${redirectPath}?linkedin_redirect_url=${encodeURIComponent(linkedInAuthenLink)}`;
@@ -32,19 +40,19 @@ export class LinkedIn extends Component {
3240
}
3341

3442
receiveMessage = (event) => {
35-
const { state } = this.props;
43+
const { state } = this.props;
3644
if (event.origin === window.location.origin) {
3745
if (event.data.errorMessage && event.data.from === 'Linked In') {
3846
// Prevent CSRF attack by testing state
39-
if (event.data.state!== state) {
47+
if (event.data.state !== state) {
4048
this.popup && this.popup.close();
4149
return;
4250
}
4351
this.props.onFailure(event.data);
4452
this.popup && this.popup.close();
4553
} else if (event.data.code && event.data.from === 'Linked In') {
4654
// Prevent CSRF attack by testing state
47-
if (event.data.state!== state) {
55+
if (event.data.state !== state) {
4856
this.popup && this.popup.close();
4957
return;
5058
}
@@ -59,7 +67,7 @@ export class LinkedIn extends Component {
5967
e.preventDefault();
6068
}
6169
this.props.onClick && this.props.onClick();
62-
this.popup = window.open(this.getUrl(), '_blank', 'width=600,height=600');
70+
this.popup = window.open(this.getUrl(), '_blank', getPopupPositionProperties({ width: 600, height: 600 }));
6371
window.removeEventListener('message', this.receiveMessage, false);
6472
window.addEventListener('message', this.receiveMessage, false);
6573
}
@@ -90,6 +98,7 @@ LinkedIn.defaultProps = {
9098
children: (<img src={require('../assets/linkedin.png')} alt="Log in with Linked In" style={{ maxWidth: '180px' }} />),
9199
state: 'fdsf78fyds7fm',
92100
supportIE: false,
93-
redirectPath: '/linkedin'
101+
redirectPath: '/linkedin',
102+
scope: 'r_emailaddress',
94103
};
95104
export default LinkedIn;

0 commit comments

Comments
 (0)