refactored oauth signin

Author: Brian Caffey

backend/accounts/utils/social/github.py

@@ -0,0 +1,31 @@
+import os
+from urllib import parse
+
+from core import constants as c
+
+import requests
+
+
+def get_access_token_from_code(backend, code):
+    """Get access token for any OAuth backend from code"""
+
+    key = f"{backend.upper()}_KEY"
+    secret = f"{backend.upper()}_SECRET"
+
+    client_id = os.environ.get(key, "nokey")
+    client_secret = os.environ.get(secret, "nosecret")
+
+    url = c.OAUTH[backend]['url']
+
+    payload = {
+        'code': code,
+        'client_id': client_id,
+        'client_secret': client_secret,
+    }
+
+    r = requests.post(url, data=payload)
+
+    # TODO: cleanup logic
+    url = "http://example.com?" + str(r.content)
+    params = dict(parse.parse_qsl(parse.urlsplit(url).query))
+    return params["b'access_token"]

backend/accounts/utils/social/oauth.py

@@ -10,7 +10,7 @@
 from social_django.utils import psa
 
 from .serializers import UserSerializer
-from .utils.social.github import get_github_access_token_from_code
+from .utils.social.oauth import get_access_token_from_code
 
 User = get_user_model()
 
@@ -26,7 +26,7 @@ def get_tokens_for_user(user):
 
 class SocialSerializer(serializers.Serializer):
     """
-    Serializer which accepts an OAuth2 access token.
+    Serializer which accepts an OAuth2 code.
     """
     code = serializers.CharField(
         allow_blank=False,
@@ -63,7 +63,7 @@ def exchange_token(request, backend):
     if serializer.is_valid(raise_exception=True):
 
         code = serializer.validated_data['code']
-        access_token = get_github_access_token_from_code(code)
+        access_token = get_access_token_from_code(backend, code)
         # set up non-field errors key
         # http://www.django-rest-framework.org/api-guide/exceptions/
         # #exception-handling-in-rest-framework-views

backend/accounts/views.py

@@ -0,0 +1,7 @@
+# https://developers.google.com/identity/protocols/OpenIDConnect
+
+OAUTH = {
+    'github': {
+        'url':'https://github.com/login/oauth/access_token'
+    }
+}

backend/core/constants.py

@@ -61,7 +61,7 @@ services:
     networks:
       - main
     ports:
-      - "8089:8080"
+      - "8080:8080"
     volumes:
       - ./quasar:/app/:rw
     depends_on:
@@ -99,6 +99,8 @@ services:
       - DJANGO_SETTINGS_MODULE=backend.settings.development
       - GITHUB_KEY=${GITHUB_KEY}
       - GITHUB_SECRET=${GITHUB_SECRET}
+      - GOOGLE_KEY=${GOOGLE_KEY}
+      - GOOGLE_SECRET=${GOOGLE_SECRET}
     depends_on:
       - db
 

docker-compose.yml

@@ -64,6 +64,7 @@ module.exports = function(ctx) {
             WS_PING_PONG: `"ws://nginx/ws/ping-pong/"`
           },
       scopeHoisting: true,
+      useNotifier: false,
       vueRouterMode: "history",
       // vueCompiler: true,
       // gzip: true,
@@ -83,8 +84,13 @@ module.exports = function(ctx) {
     },
 
     devServer: {
+      headers: {
+        "Access-Control-Allow-Origin": "*",
+        "Access-Control-Allow-Headers":
+          "Origin, X-Requested-With, Content-Type, Accept"
+      },
       // https: true,
-      // port: 8080,
+      port: 8080,
       open: true // opens browser window automatically
     },
 

quasar/quasar.conf.js

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <q-dialog @hide="hideLoginMenu" v-model="visible">
+    <q-dialog @hide="hideAuthMenu" v-model="visible">
       <q-card style=" max-width: 95%; min-width: 320px;">
         <q-tabs
           v-model="tab"
@@ -76,7 +76,6 @@ export default {
         scope: "user",
         state: "eworifjeovivoiej"
       },
-      githuboath2link: "",
       githuboauth2: "https://github.com/login/oauth/authorize",
       email: process.env.NODE_ENV === "production" ? "" : "admin@company.com",
       password: process.env.NODE_ENV === "production" ? "" : "password"
@@ -88,13 +87,13 @@ export default {
   computed: {
     visible: {
       get() {
-        return this.$store.getters.loginModalVisible;
+        return this.$store.getters.authModalVisible;
       },
       set() {}
     }
   },
   methods: {
-    hideLoginMenu() {
+    hideAuthMenu() {
       this.$store.commit("toggleLoginMenu");
     },
     login() {

quasar/src/components/LoginModal.vue quasar/src/components/AuthModal.vuequasar/src/components/LoginModal.vue renamed to quasar/src/components/AuthModal.vue

@@ -33,16 +33,16 @@
         no-caps
         @click="logout"
       />
-      <login-modal />
+      <auth-modal />
     </q-toolbar>
   </q-header>
 </template>
 
 <script>
-import LoginModal from "components/LoginModal.vue";
+import AuthModal from "components/AuthModal.vue";
 
 export default {
-  components: { LoginModal },
+  components: { AuthModal },
   methods: {
     logout() {
       this.$store.dispatch("AUTH_LOGOUT").then(() => this.$router.push("/"));

quasar/src/layouts/primary/MainHeader.vue

@@ -0,0 +1,27 @@
+<template>
+  <base-page>Logging in with GitHub...</base-page>
+</template>
+
+<script>
+import * as Cookies from "js-cookie";
+import axios from "axios";
+export default {
+  methods: {
+    githubAuth() {
+      const provider = this.$route.params.provider;
+      axios
+        .post(`/api/social/${provider}/`, { code: this.$route.query.code })
+        .then(resp => {
+          Cookies.set("refresh-token", resp.data.refresh);
+          Cookies.set("user-token", resp.data.access);
+          window.location.href = "/";
+        });
+    }
+  },
+  created() {
+    this.githubAuth();
+  }
+};
+</script>
+
+<style lang="scss" scoped></style>

quasar/src/pages/Auth/Callback.vue

@@ -0,0 +1,30 @@
+<template>
+  <base-page>
+    Loging in with Google...
+  </base-page>
+</template>
+
+<script>
+import * as Cookies from "js-cookie";
+import axios from "axios";
+export default {
+  methods: {
+    googleAuth() {
+      axios
+        .post("/api/social/google/", {
+          code: this.$route.query.code
+        })
+        .then(resp => {
+          Cookies.set("refresh-token", resp.data.refresh);
+          Cookies.set("user-token", resp.data.access);
+          window.location.href = "/";
+        });
+    }
+  },
+  created() {
+    this.googleAuth();
+  }
+};
+</script>
+
+<style lang="scss" scoped></style>