BETA
Aby się zalogować, najpiew wybierz portal.
Aby się zarejestrować, najpiew wybierz portal.
Podaj słowa kluczowe
Słowa kluczowe muszą mieć co najmniej 3 sąsiadujące znaki alfanumeryczne
Pole zawiera niedozwolone znaki

Baza wiedzy











Mechanizm OAuth w MVC 4

13-11-2013 06:00 | Rafał Gordon
Coraz więcej serwisów internetowych pozwala na logowanie się przy pomocy kont z innych portali, wśród których mamy Windows Live, Facebook czy Google. Dla dużej części użytkowników jest to spore ułatwienie, ponieważ nie muszą rejestrować się „od zera” czy pamiętać haseł i poczty dla każdego z serwisów. Dlatego w MVC 4 twórcy wyszli naprzeciw takim rozwiązaniom, dzięki czemu w bardzo łatwy sposób możemy zaimplementować go w swoich serwisach.

    Coraz więcej serwisów internetowych pozwala na logowanie się przy pomocy kont z innych portali, wśród których mamy Windows Live, Facebook czy Google. Dla dużej części użytkowników jest to spore ułatwienie, ponieważ nie muszą rejestrować się „od zera” czy pamiętać haseł i poczty dla każdego z serwisów. Dlatego w MVC 4 twórcy wyszli naprzeciw takim rozwiązaniom, dzięki czemu w bardzo łatwy sposób możemy zaimplementować go w swoich serwisach.

W tym artykule opiszę jak w prosty i łatwy sposób wykorzystać mechanizm OAuth. Czego potrzebujemy :

 Po utworzeniu nowego projektu typu - ASP.NET MVC 4 Web Application wykorzystującego szablon  Internet Application z Razor (Można używać .neta w wersji 4 jak i 4.5).

W solucji projektu możemy znaleźć plik App_Start/AuthConfig który zawiera następujący kod:

 

   public static class AuthConfig
   {
        public static void RegisterAuth()
        {
            // To let users of this site log in using their accounts from other sites such as Microsoft, Facebook, and Twitter,
            // you must update this site. For more information visit http://go.microsoft.com/fwlink/?LinkID=252166

            //OAuthWebSecurity.RegisterMicrosoftClient(
            //    clientId: "",
            //    clientSecret: "");

            //OAuthWebSecurity.RegisterTwitterClient(
            //    consumerKey: "",
            //    consumerSecret: "");

            //OAuthWebSecurity.RegisterFacebookClient(
            //    appId: "",
            //    appSecret: "");

            //OAuthWebSecurity.RegisterGoogleClient();
        }
    }

Kod ten jest ustawieniami serwisów których możemy użyć, wystarczy odkomentować którąś z części. Nie są to wszystkie z możliwość, można użyć też RegisterLinkedInClient lub RegisterYahooClient, pełną listę można znaleźć w opisie klasy OAuthWebSecurity. Każdy z serwisów potrzebuje parametrów, które można uzyskać podczas rejestracji aplikacji. W tym artykule dodamy możliwość logowania się przy pomocy Windows Live i Google.

Aby uzyskać dane do Windows Live należy(w przykładzie będziemy używać linku stylu http://codegurutest.mytest:8798 należy go podmienić  na dowolny inny link bo ten jest już zajęty):

  1. Wejść na stronę Windows Live application management site
  2. Zalogować się przy pomocy naszego konta Windows Live
  3. Wybrać nazwę aplikacji oraz język.
  4. W Redirect domain wpisać adres naszej domeny(coś w stylu http://codegurutest.mytest:8798)
  5. Zapisać sobie Identyfikator klienta oraz Klucz tajny klienta

 Aby nasz projekt mógł korzystać z Windows live lokalnie na IIS Expres należy w pliku Documents\IISExpress\config folder\applicationhost.config w miejscu gdzie   <sitename="nazwa naszego projektu” dopisać linijkę <bindingprotocol="http"bindingInformation="*:nasz port:link"/>

 Na przykład :

 <site name="codegurutest" id="13">
    <application path="/" applicationPool="Clr4IntegratedAppPool">
      <virtualDirectory path="/" physicalPath="C:\codegurutest" />
    </application>
    <bindings>
      <binding protocol="http" bindingInformation="*:4891:localhost" />
      <binding protocol="http" bindingInformation="*:8798:codegurutest.mytest"/>
    </bindings>
  </site>
 

Oraz w konsoli systemowej jako administrator :

 netsh http add urlacl url=http://codegurutest.mytest:8798  user=everyone

Ostatnią zmianą jest ustawienie w Visual Studio: project/Properties/Web ustawić Project Url: na http://codegurutest.mytest:8798.

Należy teraz odkomentować w klasie AuthConfiglinijki z RegisterMicrosoftClient oraz RegisterGoogleClient. Kod klasy AuthConfig powinien wyglądać, następująco:

public static class AuthConfig
    {
        public static void RegisterAuth()
        {
            OAuthWebSecurity.RegisterMicrosoftClient(
                clientId: " Identyfikator klienta ",
                clientSecret: " Klucz tajny klienta ");

            OAuthWebSecurity.RegisterGoogleClient();
        }
    }
 

Konfigurację mamy już za sobą, teraz musimy umożliwić naszym użytkownikom na korzystanie z nowej funkcjonalności. Szablon którego używamy zrobi to za nas, po uruchomieniu projektu i wejściu w log in zobaczymy po prawej przyciski „Microsoft” oraz „Google”.

Dzięki prostej pętli:

        @foreach (AuthenticationClientData p in Model)
        {
            <button type="submit" name="provider" value="@p.AuthenticationClient.ProviderName" title="Log in using your @p.DisplayName account">@p.DisplayName</button>
        }
 

Po kliknięciu przeniosą nas do stron logowania powyższych serwisów lub wyświetlą pytanie o zgodę udostępnienia informacji naszej stronie (jeżeli jesteśmy do nich aktualnie zalogowani).

Od teraz bez problemu możemy używać zewnętrznych autoryzacji, a nasze serwisy staną się bardziej przyjazne użytkownikom. 

Źródło: http://tinyurl.com/ojgf7bo

Komentarze 2

Bartosz Zaremba
Bartosz Zaremba
501 pkt.
Senior
23-11-2013
oceń pozytywnie 0
Dlaczego link do źródła jest niepełny?
Rafał Gordon Redaktor
Rafał Gordon
30-11-2013
oceń pozytywnie 0
Pole do źródła ma limit znaków. Poprawione.
pkt.

Zaloguj się lub Zarejestruj się aby wykonać tę czynność.