angular.js - Adakah terdapat penyelesaian yang lebih baik untuk angular oauth untuk tapak permainan sosial domestik?
曾经蜡笔没有小新
曾经蜡笔没有小新 2017-05-15 16:49:03
0
2
695

Langkah pertama oauth Sina akan membimbing pengguna untuk membuka halaman, dan kemudian url akan mengubah hala ke direktori akar tapak web selepas pengguna membenarkannya. Masalahnya adalah seperti berikut:

Soalan 1

URL akan mempunyai parameter kod dan pautan akan menjadi XXX.XXX.com/?code=XXXX Apabila htmlMode # $locationProvider.html5Mode(false) tidak digunakan, laluan akan melompat ke XXX.XXX. com/? kod=XXXX#/

Adakah terdapat cara yang baik untuk mendapatkan nilai kod ini (pada masa ini menggunakan $window.location.search, kerana $location.search tidak boleh mendapatkan nilai ini dalam mod ini);

Adakah terdapat cara yang baik untuk mengalih keluar XXX.XXX.com/?code=XXXX#/ ?code=XXX ini (jika tidak dialih keluar, setiap pautan lompat laluan akan berada di sana)

Penyelesaian sementara saya untuk dua masalah di atas ialah menggantikan $window.location.href, yang akan menyebabkan keseluruhan halaman dimuat semula (nasib baik, ia adalah log masuk halaman utama,
Ia boleh diterima, tetapi saya rasa perlu ada penggunaan yang lebih maju dan angularinik)

Alamat ujian

http://llovebaimuda.herokuapp.com/#/log masukhttp://llovebaimuda.herokuapp.com/#/login

Html5mode tidak digunakan kerana jika anda memasukkan terus url (contoh:

telefon), ia akan menyebabkan 404. Masukkan http://llovebaimuda.herokuapp.com/phone)会导致404,输入
#/telefon walaupun pelayar memaparkan http://llovebaimuda.herokuapp.com/#/phone虽然浏览器显示http://llovebaimuda.herokuapp.com/phone,但是telefon, tetapi
Apabila menyalin url kepada rakan, ia akan mendapat 404 melainkan #/ ditambah Adakah terdapat penyelesaian yang baik untuk masalah ini dalam sudut dan hujung belakang

Soalan 2

Adakah terdapat cara untuk sudut menggunakan <skrip></skrip> sebagai contoh, komponen log masuk Sina Weibo ialah js, yang akan dimuatkan pada halaman
Kemudian lakukan beberapa pemprosesan pada dom. Operasi Angular pada dom adalah dalam arahan, dan kemudian disusun dan dipautkan, ia adalah widget js log masuk Sina
Ia tidak berfungsi, atau adakah Angular memerlukan pemprosesan khas.

Soalan 3

Tiada OAuth yang agak matang dan boleh diguna semula dalam Angular (China seperti Sina Weibo, QQ, Douban), https://oauth.io/这个木有微博啊

oauth memerlukan langkah berikut:
1. Bimbing pengguna untuk membenarkan dan mendapatkan kod
2. Aktifkan permintaan ke laman web oauth dan dapatkan access_token
Langkah ini haruslah telus kepada pengguna. Sekarang idea saya adalah untuk membiarkan halaman secara aktif melompat ke halaman dengan authService ini secara aktif mendapatkan data yang diperlukan, dan kemudian menyimpan access_token dan pengguna ke $routeScope( Adakah terdapat sebarang storan setempat yang serupa. ke tulang belakang?), operasi ini akan melompat ke halaman seterusnya tanpa mengira sama ada ia berjaya atau tidak. Ini adalah halaman yang hanya boleh dilihat selepas berjaya log masuk

if 'code' of param_dict
    $window.location.href = href + '#' + DEFAULT_URL

Uji kod dari oauth ke langkah pertama

'use strict'https://oauth.io/

STATIC_URL = '/static'
DEFAULT_URL = '/phones'

phonecatApp = angular.module('phonecatApp', [
  'ngRoute'
  'ConfigServices'
  'phonecatControllers'
  'authControllers'
  'phonecatServices'
  'phonecatFilters'
  'phonecatAnimations'
])

phonecatApp.config([
  '$routeProvider'
  '$locationProvider'

($routeProvider, $locationProvider, config) ->

  $routeProvider
    .when('/',{})

    .when('/login',{
      templateUrl: STATIC_URL + '/partials/auth/login.html'
      controller: 'LoginCtrl'
    })
    .when('/auth/:code',{
    })

    .when('/phones', {
      templateUrl: STATIC_URL + '/partials/phone/list.html'
      controller: 'PhoneListCtrl'
    })

    .when('/phones/:phoneId', {
      templateUrl: STATIC_URL + '/partials/phone/detail.html'
      controller: 'PhoneDetailCtrl'
    })

    # Catch all
    .otherwise({redirectTo: 'DEFAULT_URL'})

  # Without server side support html5 must be disabled.
  $locationProvider.html5Mode(false)

])

parse_query_dict = (query) ->
  query = query.trim()
  if query.length <= 1
    return {}
  query = query.substring(1)
  query_dict = {}
  list = query.split('&')
  for q in list
    k_v = q.split('=')
    query_dict[k_v[0]] = k_v[1]
  return query_dict

phonecatApp.run([
  '$rootScope'
  '$route'
  '$location'
  '$window'
  ($rootScope, $route, $location, $window) ->
    $rootScope.$on('$locationChangeStart', (event, next, current) ->
      if not $rootScope.user
        if $location.path() == '/'
          params = $window.location.search
          if params
            href = $window.location.href
            href = href.replace(params,'')
            param_dict = parse_query_dict(params)
            if 'code' of param_dict
              $window.location.href = href + '#' + DEFAULT_URL
        # no logged user, we should be going to #login
        if next.templateUrl == "partials/login.html"
        #  already going to #login, no redirect needed
        else
        # not going to #login, we should redirect now
        #$location.path "/login"
    )
])
曾经蜡笔没有小新
曾经蜡笔没有小新

membalas semua(2)
阿神

Biar saya jawab soalan pertama:

Untuk mengalih keluar ?code=XXX, menggunakan location.href pasti akan menyegarkan halaman sebaliknya.
Rujukan: MDN: Memanipulasi sejarah penyemak imbas

小葫芦

penyelesaian rentas domain Sina Weibo angularjs

问题:oauth跨域
angularjs jsonp只能是get方式,而http.post和resouce oauth时都会引发跨域问题

解决办法,让跨域变成非跨域
跨域是前端问题,javascript访问非本域的东西的时候会有这个问题,因此后端实现
oauth然后让前端访问本域内的地址就可以解决这个问题。

方法有下面:
   1.后端服务器做个代理(公司牛人给的解决方案,具体怎么样实现没有深入研究) 
   2.使用新浪的sdk,后端解决oauth, <a href="/oauth2/sina/authorize">
     http://open.weibo.com/wiki/SDK(新浪) 
     http://michaelliao.github.io/sinaweibopy/(python sdk)
     https://github.com/tianyu0915/django-sina-login(python sdk 例子)
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan