Added oAuth by Github

Added requested changes

Changed oauth credentials

Added a third party proxy to bypass cors errors

Added access token extractor

switched to environment variables

Delete .env.local

Added setup steps in readme

Author: txrp0x9

README.md

@@ -26,6 +26,17 @@ The other part of this project includes the “notifying moderator” since we s
 
 For instance, suppose a contributor “X” has been quite active within the community by working on various PRs, opening and resolving various issues, active on chat channels but after a month “X” gets disappeared. So by using this dashboard they will have a badge interface. There will be a badge attached in front of the name of the contributor. Let the name of the badge be “Y” so this badge will have a unique color. So as the time passes like “ a day went, 1 week went, 2 weeks went, a month, etc) this badges will get keep on fading. And Every fade color will have a unique reason. For example, when a contributor made a PR, the badge appeared “Red” in color. This badge will remain in the same color as long as he/she is contributing. Assume that contributor stops contributing and has not contributed for a week so his badge will become green in color. And this will keep on notifying mainaters, Admins about their disappearing. This way the organisations will have greater eye on the contributors and can help them sustain with the community.
 
+## Setting up the project
+To set up the project, carry out the following steps:
+- Clone/download the project locally
+- Create an [oAuth](https://github.com/settings/developers) application if you haven't already
+- Make sure that the callback-url is set to `http://localhost:8080/#/auth`
+- Make an `.env` file in the root folder of the project (where package.json is)
+- Add the code given below and replace it with values from your oAuth application:
+`VUE_APP_CLIENT_ID=<client id>`
+`VUE_APP_CLIENT_SECRET=<client secret>`
+- Run the app using `npm start serve`
+
 ## Stack used
 
 This will have a dashboard, where these things can be placed. The stack used can be any but since the organisation have fixed stack so its better to stick to Nodejs, Vue, React.

package.json

@@ -10,6 +10,7 @@
   "dependencies": {
     "axios": "^0.18.0",
     "core-js": "^2.6.5",
+    "cors": "^2.8.5",
     "vue": "^2.6.10",
     "vue-router": "^3.0.3",
     "vuetify": "^1.5.5",

public/index.html

@@ -5,7 +5,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width,initial-scale=1.0" />
     <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
-    <title>codebadge</title>
+    <title>CodeBadge</title>
     <link
       rel="stylesheet"
       href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900"

src/components/auth/Login.vue

@@ -14,7 +14,6 @@
 
 <script>
 import axios from 'axios';
-import AuthHelper from '../../config/AuthHelper';
 import AxiosHelper from '../../config/AxiosHelper';
 
 export default {
@@ -27,19 +26,27 @@ export default {
   methods: {
     login() {
       window.location = `${AxiosHelper.authUrl}?client_id=${
-        AuthHelper.clientId
+        process.env.VUE_APP_CLIENT_ID
       }&scope=user%20repo%20read:org`;
     }
   },
-  created() {
+  created: function() {
     const code = window.location.href.match(/\?code=(.*)/);
     if (code) {
       this.isLoading = true;
-      axios
-        .get(`${AxiosHelper.gatekeeperUrl}/${code[1].slice(0, 20)}`)
-        .then(res => {
+      console.log(this.isLoading);
+      axios({
+        method: `post`,
+        url: `${AxiosHelper.gatekeeperUrl}?client_id=${
+          process.env.VUE_APP_CLIENT_ID
+        }&client_secret=${
+          process.env.VUE_APP_CLIENT_SECRET
+        }&code=${code[1].slice(0, 20)}`
+      }).then(res => {
           this.isLoading = false;
-          localStorage.setItem('token', res.data.token);
+          var token = res.data.match(/access_token=(.*)/)[1].slice(0,40);
+          console.log("access_token:" + token);
+          localStorage.setItem('token', token);
           window.location = AxiosHelper.homeUrl;
         })
         .catch(err => {

src/config/AuthHelper.js

@@ -1,6 +1,6 @@
 module.exports = {
   baseUrl: 'https://api.github.com',
   authUrl: 'https://github.com/login/oauth/authorize',
-  gatekeeperUrl: 'https://gatekeeper-oauth.herokuapp.com/authenticate',
-  homeUrl: 'http://prabhani.me/Codebadge/#/home'
+  gatekeeperUrl: 'https://cors-anywhere.herokuapp.com/https://github.com/login/oauth/access_token',
+  homeUrl: 'http://localhost:8080/#/home'
 };

src/config/AxiosHelper.js

@@ -1,3 +1,3 @@
 module.exports = {
-  publicPath: process.env.NODE_ENV === 'production' ? '/Codebadge/' : '/'
+  publicPath: '/'
 };