Aspnetcore.docs: How to customize the login buttons

[Rick-Anderson]

• Scaffold Identity
• Update this code

---

Document Details

⚠ Do not edit this section. It is required for docs.microsoft.com ➟ GitHub issue linking.

• ID: d1612f19-f267-493a-c230-2ca18e4eb50b
• Version Independent ID: d312db0f-6cf1-87ca-09b0-604a66e18a07
• Content: Facebook, Google, and external provider authentication in ASP.NET Core
• Content Source: aspnetcore/security/authentication/social/index.md
• Product: aspnet-core
• GitHub Login: @Rick-Anderson
• Microsoft Alias: riande

[jwiese-ms-zz]

I followed something I found online to accomplish this, basically replacing the code in login.cshtml that creates the button with a some if statements (could use a switch) that creates it's own button based on the provider. I used FontAwesome to get the brand icons so they look like they should. attached is my changed page. More work could probably be done to ensure they follow each brands guidelines and such, but for my needs this works.

@foreach(var provider in Model.ExternalLogins)
{
    if (provider.Name == "Google")
    {
      < div class="col-md-4">
          <button type = "submit" class="btn btn-block btn-google" value="@provider.Name" 
                    title="Log in using your @provider.DisplayName account" name="provider">

              <i class="fab fa-google-plus fa-align-left social-icon" style=""></i>Google
          </button>
      </div>
  }
  else if (provider.Name == "Facebook")
  {
      <div class="col-md-4">
          <button class="btn-block btn btn-facebook" type="submit" value="@provider.Name" 
                     title="Log in using your @provider.DisplayName account" name="provider">

              <i class="fab fa-facebook fa-align-left social-icon"></i>Facebook
          </button>
      </div>
  }
  else if (provider.Name == "Twitter")
  {
      <div class="col-md-4">
          <button class="btn-block btn btn-twitter" type="submit" value="@provider.Name" 
                  title="Log in using your @provider.DisplayName account" name="provider">

              <i class="fab fa-twitter fa-align-left social-icon"></i>Twitter
          </button>
      </div>
  }
  else if (provider.Name == "Microsoft")
  {
      <div class="col-md-4">
          <button class="btn-block btn btn-microsoft" type="submit" value="@provider.Name" 
                   title="Log in using your @provider.DisplayName account" name="provider">

              <i class="fab fa-microsoft fa-align-left social-icon"></i>Microsoft
          </button>
      </div>
  }
  else
  {
      <div class="col-md-4">
          <button class="btn-block btn btn-linkedin" type="submit" name="provider" 
           value="@provider.Name" title="Log in using your @provider.DisplayName account">

              <i class="fab fa-life-buoy fa-align-left social-icon"></i>
              Sign in with @provider.Name

          </button>
      </div>
  }

This gives me the attached look on the page.

[jwiese-ms-zz]

and the css I put into site.css:

.btn-google:hover {
    background: #b22222;
    color: #fff;
}

.btn-facebook:hover {
    background: #2b4db1;
    color: #fff;
}

.btn-twitter:hover {
    background: #007bb6;
    color: #fff;
}

.btn-microsoft:hover {
    background: #00618E;
    color: #fff;
}

.btn-facebook {
    background: #305c99;
    color: #fff;
}

.btn-twitter {
    background: #00cdff;
    color: #fff;
}

.btn-google {
    background: #d24228;
    color: #fff;
}

.btn-linkedin {
    background: #007bb6;
    color: #fff;
}

.btn-microsoft {
    background: #007bb6;
    color: #fff;
}