okta login feature

doccano · Hironsan · Dec 9, 2022 · Dec 1, 2022 · Dec 2, 2022 · Dec 2, 2022
commit 706edd8158b1d04c63a1ecff6f2871ed2169a8e5
diff --git a/backend/config/settings/base.py b/backend/config/settings/base.py
@@ -59,8 +59,10 @@
     "allauth",
     "allauth.account",
     "allauth.socialaccount",
+    "allauth.socialaccount.providers.okta",
     "dj_rest_auth",
     "dj_rest_auth.registration",
+    "django.contrib.sites",
     "django_celery_results",
     "django_drf_filepond",
     "health_check",
@@ -279,3 +281,14 @@
 CELERY_RESULT_SERIALIZER = "json"
 
 DEFAULT_AUTO_FIELD = "django.db.models.AutoField"
+
+SOCIALACCOUNT_PROVIDERS = {
+    'okta': {
+        'OKTA_BASE_URL': env("OAUTH_OKTA_OAUTH2_API_URL"),
+        'OAUTH_PKCE_ENABLED': True,
+        'APP': {
+            'client_id': env("OAUTH_OKTA_OAUTH2_KEY"),
+            'secret': env("OAUTH_OKTA_OAUTH2_SECRET")
+        }
+    }
+}
diff --git a/backend/config/urls.py b/backend/config/urls.py
@@ -52,6 +52,8 @@
 urlpatterns += [
     path("admin/", admin.site.urls),
     path("api-auth/", include("rest_framework.urls")),
+    path('social/', include("social.urls")),
+    path('v1/social/', include("social.urls")),
     path("v1/health/", include("health_check.urls")),
     path("v1/", include("api.urls")),
     path("v1/", include("roles.urls")),

diff --git a/backend/social/__init__.py b/backend/social/__init__.py
diff --git a/backend/social/admin.py b/backend/social/admin.py
diff --git a/backend/social/apps.py b/backend/social/apps.py
@@ -0,0 +1,6 @@
+from django.apps import AppConfig
+
+
+class SocialConfig(AppConfig):
+    default_auto_field = "django.db.models.BigAutoField"
+    name = "social"
diff --git a/backend/social/models.py b/backend/social/models.py
diff --git a/backend/social/okta.py b/backend/social/okta.py
@@ -0,0 +1,8 @@
+from allauth.socialaccount.providers.okta.views import OktaOAuth2Adapter
+from dj_rest_auth.registration.views import SocialLoginView
+from allauth.socialaccount.providers.oauth2.client import OAuth2Client
+
+class OktaLogin(SocialLoginView):
+    adapter_class = OktaOAuth2Adapter
+    callback_url = '/projects'
+    client_class = OAuth2Client
diff --git a/backend/social/urls.py b/backend/social/urls.py
@@ -0,0 +1,9 @@
+from django.urls import include, path
+
+from .okta import OktaLogin
+from .views import Social
+
+urlpatterns = [
+    path('links/', Social.as_view()),
+    path('complete/okta-oauth2/', OktaLogin.as_view(), name='okta_login'),
+]
diff --git a/backend/social/views.py b/backend/social/views.py
@@ -0,0 +1,18 @@
+from rest_framework.response import Response
+from rest_framework.views import APIView
+from django.conf import settings
+
+class Social(APIView):
+    permission_classes = ()
+
+    def get(self, request, *args, **kwargs):
+        return Response({
+          'okta': {
+            'type': 'oauth2',
+            'base_url': settings.SOCIALACCOUNT_PROVIDERS.get('okta').get('OKTA_BASE_URL'),
+            'client_id': settings.SOCIALACCOUNT_PROVIDERS.get('okta').get('APP').get('client_id'),
+            'redirect_path': '/social/complete/okta-oauth2',
+            'authorize_url': 'https://' + settings.SOCIALACCOUNT_PROVIDERS.get('okta').get('OKTA_BASE_URL') + '/oauth2/v1/authorize?response_type=code&client_id=' + settings.SOCIALACCOUNT_PROVIDERS.get('okta').get('APP').get('client_id') + '&scope=openid&state=unknown&response_mode=form_post'
+          } if settings.SOCIALACCOUNT_PROVIDERS.get('okta').get('OKTA_BASE_URL') else {},
+        })
+
diff --git a/frontend/components/auth/SocialLogin.vue b/frontend/components/auth/SocialLogin.vue
@@ -0,0 +1,44 @@
+<template>
+  <div class="mt-10">
+    <v-btn
+      v-for="item in social"
+      :key="item.provider"
+      block
+      elevation="2"
+      color="secondary"
+      :href="item.href"
+    >
+      Login With {{item.provider}}
+    </v-btn>
+  </div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+
+export default Vue.extend({
+  props: {
+    fetchSocialLink: {
+      type: Function,
+      default: () => Promise
+    }
+  },
+  data() {
+    return {
+      social: {}
+    }
+  },
+  async mounted() {
+    const response = await this.fetchSocialLink();
+    this.social = Object.entries(response)
+      .map(([key, value]: any) => ({
+        provider: key,
+        value,
+      })).filter((item) => !!item.value?.authorize_url)
+      .map((item: any) => ({
+        ...item,
+        href: `${item.value.authorize_url}&redirect_uri=${location.origin}${item.value.redirect_path}`,
+      }));
+  },
+})
+</script>
diff --git a/frontend/domain/models/auth/authRepository.ts b/frontend/domain/models/auth/authRepository.ts
@@ -2,4 +2,6 @@ export interface AuthRepository {
   login(username: string, password: string): Promise<void>
 
   logout(): Promise<void>
+
+  socialLink(): Promise<any[]>
 }
diff --git a/frontend/pages/auth.vue b/frontend/pages/auth.vue
@@ -5,6 +5,8 @@
         <v-row align="center" justify="center">
           <v-col cols="12" sm="8" md="4">
             <form-login :login="authenticateUser" />
+
+            <social-login :fetch-social-link='fetchSocialLink' />
           </v-col>
         </v-row>
       </v-container>
@@ -16,14 +18,16 @@
 import Vue from 'vue'
 import { mapActions } from 'vuex'
 import FormLogin from '@/components/auth/FormLogin.vue'
+import SocialLogin from '@/components/auth/SocialLogin.vue'
 
 export default Vue.extend({
   components: {
-    FormLogin
+    FormLogin,
+    SocialLogin,
   },
 
   methods: {
-    ...mapActions('auth', ['authenticateUser'])
+    ...mapActions('auth', ['authenticateUser', 'fetchSocialLink'])
   }
 })
 </script>
diff --git a/frontend/repositories/auth/apiAuthRepository.ts b/frontend/repositories/auth/apiAuthRepository.ts
@@ -13,4 +13,10 @@ export class APIAuthRepository implements AuthRepository {
     const url = '/auth/logout/'
     await this.request.post(url)
   }
+
+  async socialLink(): Promise<any[]> {
+    const url = '/social/links/'
+    const response = await this.request.get(url);
+    return response.data
+  }
 }
diff --git a/frontend/services/application/auth/authApplicationService.ts b/frontend/services/application/auth/authApplicationService.ts
@@ -10,4 +10,8 @@ export class AuthApplicationService {
   public async logout() {
     await this.repository.logout()
   }
+
+  public async socialLink() {
+    return await this.repository.socialLink()
+  }
 }
diff --git a/frontend/store/auth.js b/frontend/store/auth.js
@@ -47,6 +47,9 @@ export const actions = {
       throw new Error('The credential is invalid')
     }
   },
+  async fetchSocialLink() {
+    return await this.$services.auth.socialLink()
+  },
   async initAuth({ commit }) {
     try {
       const user = await this.$services.user.getMyProfile()