To start with Vue.js I watched this Vue.js Fundamentals by DevMarketer. The guy is very good and explain basics of the framework.

We are going to use AzureDevOps for source control and CI/CD and host the app in the Azure using Web Apps.

To follow along you have to create Azure DevOps account as explained here.

I am going to use my Azure DevOps account and created a public project here and the repo called vue_azure_c2c. To clone repo use this command

git clone https://[email protected]/sergeydotnet/Vue.js/_git/vue_azure_b2c

If  you prefer to use GitHub, the GitHub repo is here.

To get started with Vue.js we install vue-cli  

npm install -g vue-cli

Of course if you don't have Node.js installed, download it from here. -g flag means that we install it globally.

Check installation by running this command

vue --version

Next create a new Vue.js app using vue-cli, I called the app vue_azure_b2c.

vue init webpack vue_azure_b2c

and answer some questions

Vue-cli config

To get started I dont't need neither vue-route nor ESLint.

I going to use me favorite editor called Visual Studio Code. Download it from here. Also install Vetur extension to work with Vue.js using Visual Studio Code

Vetur

Vue-cli created for us this structure

Structure

To run the app

npm install
npm run dev

The output looks something like this

Running application

And you find your app running on port 8080. Open browser and navigate to

http://localhost:8080

Your, get started app looks like this

Welcome to Vue.js

Remember to add, commit and push your changes.

Log in to your Azure Account, if you don't have one read this article and create Azure AD B2C as described here.

Now we have to add our vue.js application to Azure AD B2C tenant. Here is explanation how to do it.

Then we registry google as Azure AD B2C Identity provider and define Sign up and sign in user flow.

When we finished with all this we come back to our vue.js app and configure to use Azure AD B2C.

Create two folders under src called: config and msal

config and msal folders

Under config folder create index.js file and paste following code

export default {
  clientid: 'your-client-id-also-called-applicationId',
  authority: 'https://login.microsoftonline.com/tfp/<tenant url>/<name-for-sign-up-and-sign-in-user-flow>'
}

Clientid is your Azure B2C Tenant application id. Here is description where to find this id.

Authority is path like this

https://login.microsoftonline.com/tfp/sergeydotnetb2c.onmicrosoft.com/B2C_1_google_identity_provider

This blog explain how to find tenant url  and this where to find sign up sign in user flow.

Create also index.js file under msal folder and paste following code

import * as Msal from 'msal'
import config from '../config'

export default class AuthService {
  constructor() {
    this.applicationConfig = {
      clientID: config.clientid,
      authority: config.authority
    }
    this.app = new Msal.UserAgentApplication(
      this.applicationConfig.clientID,
      this.applicationConfig.authority)
  }

  login() {
    this.app.loginPopup().then(
      token => {
        console.log("JWT token " + token)
      },
      error => {
        console.log("Login error " + error)
      }
    );
  }

  logout() {
    this.app._user = null
    this.app.logout()
  }

  getUser() {
    return this.app.getUser()
  }
}

Here we are using Microsoft javascript library MSAL. Nothing fancy here

ln.6-8 created applicationConfig object where we define to properties clientID and authority and getting values from config.js

ln.10-12 created UserAgentApplication object and passing clientID and authority.

Then we defined 3 methods login, logout and getUser.

login method promt a login dialog and then print out JWT token to console and log an error to console if something unexpected happened.

logout method just clean the user and call logout method from MSAL library.

getUser method just gets the user, calling MSAL library.

Open main.js file from src folder and paste following  

Vue.prototype.$AuthService = new AuthService()

before

Vue.config.productionTip = false

This is the way how to make AuthService available for all Vue components.

Open HelloWorld.vue component from the components folder and delete everything. Paste following code

<template>
  <div>
    <div id="label">Sign-in with Microsoft Azure AD B2C</div>

    <button @click="login" v-if="!user">Login</button>
    <button @click="logout" v-if="user">Logout</button>

    <div v-if="user">Hello from Vue.js. User is {{user.name}}</div>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  methods: {
    login() {
      this.$AuthService.login();
    },
    logout() {
      this.$AuthService.logout();
    }
  },
  computed: {
    user: function() {
      return this.$AuthService.getUser();
    }
  }
};
</script>

This is how Vue.js defines components. First you have a template tag. There we are writing our html code, then in the script tag we are writing our Javascript code.

In the Javascript code we define a name for component, HelloWorld in this example, then we define two methods login and logout where we just call login and logout from our AuthService.

Then we define one computed property called user and using our AuthService to get user. Computed properties are really cool, each time something changes this property will be updated.

In the html we define two buttons where we are using Vue directives. @click is event handler and means that when user clicks the button login or logout method will be called.

Also we are using v-if directive and this is if statement where we are checking if user is defined then show logout button and when user is not defined show login button.

Note how we are using computed property in the div tag, {{user.name}}.  This is called interpolation. Read more about interpolation here.

Now we are ready to run the app. Navigate to your app using command line

cd path_to_your_app_where_package.json_is_located
npm install
npm run dev

Open browser and navigate to

http://localhost:8080/
Sign in with Axure AD B2C

click on Login button

Login

Notice that we have 3 options: login or Sign up now or Sign in with your sosial account where I can choose google as we configured here.

When we choose to Sign up now or using new google account, new users will be added to the Azure AD B2C

Next step is to create backend API and using JWT token for authentication.


Vue.js Fundamentals

Download Node.js

Download Visual Studio Code

My Vue.js Azure DevOps project

GitHub repo

Create Azure Account

Create Azure Active Directory(AD) B2C

Add application to Azure AD B2C

Create Google as Azure AD B2C Identity provider

Microsoft Authentication Library (MSAL) Preview for JS

Vue.js Template Syntax