Skip to main content

VueJS

The Vue code of our domain.com/callback page

<html>
   <head>
       <title>Midentity OpenID</title>
       <script src="https://unpkg.com/vue"></script>
       <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
   </head>
   <body>
      
       <div id="app" >
           <p v-if = "loading" >
               loading...
           </p>
           <p v-else>
               {{midentityUser}}
           </p>
       </div>
        <script>
           window.onload = function () {
      const CONFIG = {
            API_URL: "https://xxx.api.com",
             CALLBACK_URL: "https://localhost:3000/callback",
};
 
               const queryString = new URLSearchParams(window.location.href);
 
               const v = new Vue({
                   el: '#app',
                   data: {
                       midentityUser: null,
                       loading: false,
                       code: queryString.get("code"),
                   },
                   methods: {
                       getCode: () => {
                           const v = this;
                           v.loading = true;
                           axios
                           .get(CONFIG.API_URL +  "/auth/oidc?redirect_uri=" + CONFIG.CALLBACK_URL)
                           .then(response => {
                               window.location.href = response.data.composed_url;
                           })
                           .catch(error => {
                               v.midentityUser = error;
                           })
                           .finally(v.loading = false)
                       },
                       getUser: () => {
                           const v = this;
                           v.loading = true;
                           axios
                           .post(CONFIG.API_URL + "/auth/code", {
                               code: v.code,
                               redirect_uri: CONFIG.CALLBACK_URL,
                           })
                           .then((response) => {
                               v.midentityUser = response.data.user;
                           })
                           .catch((error) => {
                               v.midentityUser = error;
                           })
                           .finally(v.loading = false)
                       },
                   },
                   created: function() {
                       const v = this;
                       if(!v.code){
                           v.getCode();
                       }else if(!v.midentityUser){
                           v.getUser();
                       }
                   },
               });
           }
       </script>
   </body>
</html>